@nordcom/nordstar-button - npm Package Compare versions

Comparing version 0.0.63-unstable-20240923120459 to 0.0.63-unstable-20240924032628

dist/button.d.ts

 import { As, NordstarColor, InternalForwardRefRenderFunction } from '@nordcom/nordstar-system';
+import { VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
-export type ButtonProps = {
+import { ClassProp } from 'class-variance-authority/types';
+declare const variants: (props?: ({
+    color?: "primary" | "secondary" | "foreground" | null | undefined;
+    variant?: "outline" | "solid" | null | undefined;
+} & ClassProp) | undefined) => string;
+type ButtonBaseProps = {
     as?: As;
@@ -9,19 +15,17 @@ variant?: 'outline' | 'solid';
     disabled?: boolean;
+    contentClassName?: string;
+} & Omit<VariantProps<typeof variants>, 'color'>;
+type ButtonIconProps = {
+    icon: ReactNode;
+    iconClassName?: string;
 };
-/**
- * `<Button/>`, a generalized button element.
- *
- * @param {object} props - `<Button/>` props.
- * @param {As} [props.as] - The element to render the component as.
- * @param {'outline' | 'solid'} [props.variant='outline'] - The variant.
- * @param {NordstarColor} [props.color='default'] - The color scheme.
- * @returns {React.ReactNode} The `<Button/>` component.
- *
- * @example
- * ```tsx
- * <Button>Button</Button>
- * ```
- */
-declare const Button: InternalForwardRefRenderFunction<"button", ButtonProps, never>;
-export default Button;
+type ButtonNoIconProps = {
+    icon?: undefined;
+    iconClassName?: never;
+};
+export type ButtonProps = ButtonBaseProps & (ButtonIconProps | ButtonNoIconProps);
+declare const _default: InternalForwardRefRenderFunction<"button", ButtonProps, never> & {
+    displayName: string;
+};
+export default _default;
 //# sourceMappingURL=button.d.ts.map

dist/button.js

 import 'react';
 
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from '@nordcom/nordstar-system';
+import { cn, forwardRef } from '@nordcom/nordstar-system';
+import { cva } from 'class-variance-authority';
 
-import './button.css';const container = "_container_1xvik_1";
-const styles = {
-	container: container
-};
-
+const variants = cva(
+  cn(
+    "flex w-fit select-none appearance-none items-center justify-center gap-3 rounded-lg border-2 border-solid px-4 py-2 text-center text-sm font-bold no-underline transition-all"
+  ),
+  {
+    variants: {
+      color: {
+        primary: "bg-primary border-primary text-primary-foreground",
+        secondary: "bg-secondary border-secondary text-secondary-foreground",
+        foreground: "bg-foreground border-foreground text-background"
+      },
+      variant: {
+        outline: "bg-transparent",
+        solid: "hover:brightness-50 focus-visible:brightness-50 active:brightness-75"
+      }
+    },
+    compoundVariants: [
+      {
+        color: "primary",
+        variant: "outline",
+        class: "text-primary hover:bg-primary hover:text-primary-foreground"
+      },
+      {
+        color: "secondary",
+        variant: "outline",
+        class: "text-secondary hover:bg-secondary hover:text-secondary-foreground"
+      },
+      {
+        color: "foreground",
+        variant: "outline",
+        class: "text-foreground hover:bg-foreground hover:text-background"
+      }
+    ],
+    defaultVariants: {
+      color: "primary",
+      variant: "solid"
+    }
+  }
+);
 const Button = forwardRef(
   ({
-    variant = "solid",
-    color = "default",
+    variant,
+    color,
     icon = null,
@@ -21,22 +56,50 @@ as: Tag = "button",
     children,
+    contentClassName,
+    iconClassName,
     ...props
   }, ref) => {
-    const classes = `${styles.container}${className ? ` ${className}` : ""}`;
     return /* @__PURE__ */ jsxs(
       Tag,
       {
+        ...props,
+        ...typeof disabled !== "undefined" && {
+          disabled,
+          "aria-disabled": disabled
+        },
         ref,
         role: "button",
         type: type || "button",
+        draggable: false,
+        className: cn(
+          variants({
+            variant,
+            color: color === "default" ? "foreground" : color
+          }),
+          !disabled && "cursor-pointer",
+          disabled && "pointer-events-none cursor-not-allowed brightness-50",
+          className
+        ),
         "data-variant": variant,
         "data-color": color,
-        ...props,
-        ...typeof disabled !== "undefined" && {
-          disabled,
-          "aria-disabled": disabled
-        },
-        className: classes,
         children: [
-          icon ? /* @__PURE__ */ jsx("div", { "data-icon": true, children: icon }) : null,
-          /* @__PURE__ */ jsx("div", { "data-content": true, children })
+          icon ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "contents *:block *:aspect-square *:w-4 *:stroke-1 *:text-[length:inherit] *:text-inherit *:font-inherit",
+                iconClassName
+              ),
+              children: icon
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "block text-center font-heading text-inherit font-inherit uppercase",
+                contentClassName
+              ),
+              children
+            }
+          )
         ]
@@ -47,5 +110,7 @@ }
 );
-Button.displayName = "Nordstar.Button";
+const button = Object.assign(Button, {
+  displayName: "Nordstar.Button"
+});
 
-export { Button as default };
+export { button as default };
 //# sourceMappingURL=button.js.map

dist/index.d.ts

 import { default as Button } from './button';
+import './globals.css';
 export type { ButtonProps } from './button';
 export { Button };
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,2 +0,2 @@
-export { default as Button } from './button.js';
+import './index.css';export { default as Button } from './button.js';
 //# sourceMappingURL=index.js.map

package.json

@@ -5,3 +5,3 @@ {
   "type": "module",
-  "version": "0.0.63-unstable-20240923120459",
+  "version": "0.0.63-unstable-20240924032628",
   "description": "Nordstar Button",
@@ -11,3 +11,2 @@ "files": [
   ],
-  "prettier": "@nordcom/prettier",
   "main": "./dist/index.js",
@@ -56,3 +55,3 @@ "module": "./dist/index.js",
   "author": {
-    "name": "Nordcom Group Inc.",
+    "name": "Nordcom AB",
     "email": "[e-mail]",
@@ -77,5 +76,6 @@ "url": "https://nordcom.io/"
   },
-  "homepage": "https://nordstar.nordcom.io/docs/components/button/",
+  "homepage": "https://nordstar.dev/docs/components/button/",
   "dependencies": {
-    "@nordcom/nordstar-system": "0.0.63-unstable-20240923120459"
+    "class-variance-authority": "0.7.0",
+    "@nordcom/nordstar-system": "0.0.63-unstable-20240924032628"
   },
@@ -91,5 +91,8 @@ "peerDependencies": {
     "@types/react": "18.3.8",
+    "autoprefixer": "10.4.20",
+    "postcss": "8.4.47",
     "prettier": "3.3.3",
     "react-dom": "18.3.1",
     "react": "18.3.1",
+    "tailwindcss": "3.4.12",
     "typescript": "5.6.2",
@@ -102,4 +105,8 @@ "vite": "5.4.7"
     "clean": "rm -rf dist coverage storybook-static .turbo .next *.tsbuildinfo *.log",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint": "concurrently -i pnpm:lint:*",
+    "lint:prettier": "prettier --check src/**/*.*",
+    "fix": "concurrently -i pnpm:fix:*",
+    "fix:prettier": "prettier  --write \"./**/*.{cjs,mjs,ts,tsx,json}\""
   }
 }

README.md

@@ -1,2 +0,2 @@
-# @nordcom/nordstar-button
+# [@nordcom/nordstar-button](https://nordstar.dev/docs/components/button/?utm_source=nordstar&utm_campaign=oss)
 
@@ -3,0 +3,0 @@ A button component for the Nordstar design system.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20378

increased by72.91%

Lines of code

162

increased by92.86%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

12

increased by33.33%

Dependency changes

• + Addedclass-variance-authority@0.7.0

• + Added@nordcom/nordstar-system@0.0.63-unstable-20240924032628(transitive)

• + Addedclass-variance-authority@0.7.0(transitive)

• + Addedclsx@2.0.0(transitive)

• + Addedhex-to-hsl@1.0.2(transitive)

• + Addedhex-to-rgb@1.0.1(transitive)

• + Addedrgb-to-hsl@0.0.2(transitive)

• + Addedtailwind-merge@2.5.2(transitive)

• - Removed@nordcom/nordstar-system@0.0.63-unstable-20240923120459(transitive)

• - Removedthe-new-css-reset@1.11.3(transitive)

• Updated@nordcom/nordstar-system@0.0.63-unstable-20240924032628