@nkey-ui/theme - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/components/index.d.ts

@@ -7,3 +7,4 @@ export { ButtonBaseVariantProps, ButtonGroupVariantProps, ButtonVariantProps, IconButtonVariantProps, button, buttonBase, buttonGroup, iconButton } from './button.js';
 export { AlertVariantProps, AlertWrapperVariantProps, alert, alertWrapper } from './alert.js';
+export { BadgeVariantProps, badge } from './badge.js';
 import 'tailwind-variants/dist/config';
 import 'tailwind-variants';

dist/components/index.js

@@ -25,2 +25,3 @@ "use strict";
   alertWrapper: () => alertWrapper,
+  badge: () => badge,
   button: () => button,
@@ -129,2 +130,53 @@ buttonBase: () => buttonBase,
 });
+
+// src/components/badge.ts
+var import_tailwind_variants7 = require("tailwind-variants");
+
+// src/utils/variants.ts
+var bg = {
+  primary: "bg-primary-light dark:bg-primary-dark",
+  secondary: "bg-secondary-light dark:bg-secondary-dark",
+  info: "bg-info-light dark:bg-info-dark",
+  success: "bg-success-light dark:bg-success-dark",
+  warning: "bg-warning-light dark:bg-warning-dark",
+  error: "bg-error-light dark:bg-error-dark"
+};
+var rounded = {
+  sm: "rounded",
+  md: "rounded-lg",
+  lg: "rounded-2xl"
+};
+var colorVariants = {
+  bg,
+  rounded
+};
+
+// src/components/badge.ts
+var badge = (0, import_tailwind_variants7.tv)({
+  base: "absolute z-[2] flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]",
+  variants: {
+    color: colorVariants.bg,
+    rounded: colorVariants.rounded,
+    size: {
+      xs: "h-[15px] min-w-[15px] text-[.7rem]",
+      sm: "h-[20px] min-w-[20px] text-xs",
+      md: "h-[25px] min-w-[25px] text-sm",
+      lg: "text-md h-[30px] min-w-[30px]"
+    },
+    variant: {
+      standard: "",
+      dot: "h-2 w-2 min-w-0"
+    },
+    overlap: {
+      standard: "right-0 top-0",
+      circular: "right-[14%] top-[14%]"
+    }
+  },
+  defaultVariants: {
+    variant: "standard",
+    color: "primary",
+    overlap: "standard",
+    size: "sm"
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
@@ -134,2 +186,3 @@ 0 && (module.exports = {
   alertWrapper,
+  badge,
   button,
@@ -136,0 +189,0 @@ buttonBase,

dist/index.d.ts

@@ -7,2 +7,3 @@ export { ButtonBaseVariantProps, ButtonGroupVariantProps, ButtonVariantProps, IconButtonVariantProps, button, buttonBase, buttonGroup, iconButton } from './components/button.js';
 export { AlertVariantProps, AlertWrapperVariantProps, alert, alertWrapper } from './components/alert.js';
+export { BadgeVariantProps, badge } from './components/badge.js';
 export { colorVariants } from './utils/variants.js';
@@ -9,0 +10,0 @@ export { colors } from './colors/index.js';

dist/index.js

@@ -31,2 +31,3 @@ "use strict";
   alertWrapper: () => alertWrapper,
+  badge: () => badge,
   button: () => button,
@@ -46,3 +47,3 @@ buttonBase: () => buttonBase,
   spinnerCircle: () => spinnerCircle,
-  tv: () => import_tailwind_variants7.tv
+  tv: () => import_tailwind_variants8.tv
 });
@@ -143,76 +144,53 @@ module.exports = __toCommonJS(src_exports);
 
+// src/components/badge.ts
+var import_tailwind_variants7 = require("tailwind-variants");
+
 // src/utils/variants.ts
-var solid = {
-  default: "bg-default text-default-foreground",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  success: "bg-success text-success-foreground",
-  warning: "bg-warning text-warning-foreground",
-  danger: "bg-danger text-danger-foreground",
-  foreground: "bg-foreground text-background"
+var bg = {
+  primary: "bg-primary-light dark:bg-primary-dark",
+  secondary: "bg-secondary-light dark:bg-secondary-dark",
+  info: "bg-info-light dark:bg-info-dark",
+  success: "bg-success-light dark:bg-success-dark",
+  warning: "bg-warning-light dark:bg-warning-dark",
+  error: "bg-error-light dark:bg-error-dark"
 };
-var shadow = {
-  default: "shadow-lg shadow-default/50 bg-default text-default-foreground",
-  primary: "shadow-lg shadow-primary/40 bg-primary text-primary-foreground",
-  secondary: "shadow-lg shadow-secondary/40 bg-secondary text-secondary-foreground",
-  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
-  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
-  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
-  foreground: "shadow-lg shadow-foreground/40 bg-foreground text-background"
+var rounded = {
+  sm: "rounded",
+  md: "rounded-lg",
+  lg: "rounded-2xl"
 };
-var bordered = {
-  default: "bg-transparent border-default text-foreground",
-  primary: "bg-transparent border-primary text-primary",
-  secondary: "bg-transparent border-secondary text-secondary",
-  success: "bg-transparent border-success text-success",
-  warning: "bg-transparent border-warning text-warning",
-  danger: "bg-transparent border-danger text-danger",
-  foreground: "bg-transparent border-foreground text-foreground"
-};
-var flat = {
-  default: "bg-default/40 text-default-foreground",
-  primary: "bg-primary/20 text-primary",
-  secondary: "bg-secondary/20 text-secondary",
-  success: "bg-success/20 text-success-600 dark:text-success",
-  warning: "bg-warning/20 text-warning-600 dark:text-warning",
-  danger: "bg-danger/20 text-danger dark:text-danger-500",
-  foreground: "bg-foreground/10 text-foreground"
-};
-var faded = {
-  default: "border-default bg-default-100 text-default-foreground",
-  primary: "border-default bg-default-100 text-primary",
-  secondary: "border-default bg-default-100 text-secondary",
-  success: "border-default bg-default-100 text-success",
-  warning: "border-default bg-default-100 text-warning",
-  danger: "border-default bg-default-100 text-danger",
-  foreground: "border-default bg-default-100 text-foreground"
-};
-var light = {
-  default: "bg-transparent text-default-foreground",
-  primary: "bg-transparent text-primary",
-  secondary: "bg-transparent text-secondary",
-  success: "bg-transparent text-success",
-  warning: "bg-transparent text-warning",
-  danger: "bg-transparent text-danger",
-  foreground: "bg-transparent text-foreground"
-};
-var ghost = {
-  default: "border-default text-default-foreground hover:!bg-default",
-  primary: "border-primary text-primary hover:!text-primary-foreground hover:!bg-primary",
-  secondary: "border-secondary text-secondary hover:text-secondary-foreground hover:!bg-secondary",
-  success: "border-success text-success hover:!text-success-foreground hover:!bg-success",
-  warning: "border-warning text-warning hover:!text-warning-foreground hover:!bg-warning",
-  danger: "border-danger text-danger hover:!text-danger-foreground hover:!bg-danger",
-  foreground: "border-foreground text-foreground hover:!bg-foreground"
-};
 var colorVariants = {
-  solid,
-  shadow,
-  bordered,
-  flat,
-  faded,
-  light,
-  ghost
+  bg,
+  rounded
 };
 
+// src/components/badge.ts
+var badge = (0, import_tailwind_variants7.tv)({
+  base: "absolute z-[2] flex -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full px-[4px]",
+  variants: {
+    color: colorVariants.bg,
+    rounded: colorVariants.rounded,
+    size: {
+      xs: "h-[15px] min-w-[15px] text-[.7rem]",
+      sm: "h-[20px] min-w-[20px] text-xs",
+      md: "h-[25px] min-w-[25px] text-sm",
+      lg: "text-md h-[30px] min-w-[30px]"
+    },
+    variant: {
+      standard: "",
+      dot: "h-2 w-2 min-w-0"
+    },
+    overlap: {
+      standard: "right-0 top-0",
+      circular: "right-[14%] top-[14%]"
+    }
+  },
+  defaultVariants: {
+    variant: "standard",
+    color: "primary",
+    overlap: "standard",
+    size: "sm"
+  }
+});
+
 // src/colors/blue.ts
@@ -557,3 +535,3 @@ var blue = {
 // src/index.ts
-var import_tailwind_variants7 = require("tailwind-variants");
+var import_tailwind_variants8 = require("tailwind-variants");
 // Annotate the CommonJS export names for ESM import in node:
@@ -563,2 +541,3 @@ 0 && (module.exports = {
   alertWrapper,
+  badge,
   button,
@@ -565,0 +544,0 @@ buttonBase,

dist/utils/index.js

@@ -28,73 +28,18 @@ "use strict";
 // src/utils/variants.ts
-var solid = {
-  default: "bg-default text-default-foreground",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  success: "bg-success text-success-foreground",
-  warning: "bg-warning text-warning-foreground",
-  danger: "bg-danger text-danger-foreground",
-  foreground: "bg-foreground text-background"
+var bg = {
+  primary: "bg-primary-light dark:bg-primary-dark",
+  secondary: "bg-secondary-light dark:bg-secondary-dark",
+  info: "bg-info-light dark:bg-info-dark",
+  success: "bg-success-light dark:bg-success-dark",
+  warning: "bg-warning-light dark:bg-warning-dark",
+  error: "bg-error-light dark:bg-error-dark"
 };
-var shadow = {
-  default: "shadow-lg shadow-default/50 bg-default text-default-foreground",
-  primary: "shadow-lg shadow-primary/40 bg-primary text-primary-foreground",
-  secondary: "shadow-lg shadow-secondary/40 bg-secondary text-secondary-foreground",
-  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
-  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
-  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
-  foreground: "shadow-lg shadow-foreground/40 bg-foreground text-background"
+var rounded = {
+  sm: "rounded",
+  md: "rounded-lg",
+  lg: "rounded-2xl"
 };
-var bordered = {
-  default: "bg-transparent border-default text-foreground",
-  primary: "bg-transparent border-primary text-primary",
-  secondary: "bg-transparent border-secondary text-secondary",
-  success: "bg-transparent border-success text-success",
-  warning: "bg-transparent border-warning text-warning",
-  danger: "bg-transparent border-danger text-danger",
-  foreground: "bg-transparent border-foreground text-foreground"
-};
-var flat = {
-  default: "bg-default/40 text-default-foreground",
-  primary: "bg-primary/20 text-primary",
-  secondary: "bg-secondary/20 text-secondary",
-  success: "bg-success/20 text-success-600 dark:text-success",
-  warning: "bg-warning/20 text-warning-600 dark:text-warning",
-  danger: "bg-danger/20 text-danger dark:text-danger-500",
-  foreground: "bg-foreground/10 text-foreground"
-};
-var faded = {
-  default: "border-default bg-default-100 text-default-foreground",
-  primary: "border-default bg-default-100 text-primary",
-  secondary: "border-default bg-default-100 text-secondary",
-  success: "border-default bg-default-100 text-success",
-  warning: "border-default bg-default-100 text-warning",
-  danger: "border-default bg-default-100 text-danger",
-  foreground: "border-default bg-default-100 text-foreground"
-};
-var light = {
-  default: "bg-transparent text-default-foreground",
-  primary: "bg-transparent text-primary",
-  secondary: "bg-transparent text-secondary",
-  success: "bg-transparent text-success",
-  warning: "bg-transparent text-warning",
-  danger: "bg-transparent text-danger",
-  foreground: "bg-transparent text-foreground"
-};
-var ghost = {
-  default: "border-default text-default-foreground hover:!bg-default",
-  primary: "border-primary text-primary hover:!text-primary-foreground hover:!bg-primary",
-  secondary: "border-secondary text-secondary hover:text-secondary-foreground hover:!bg-secondary",
-  success: "border-success text-success hover:!text-success-foreground hover:!bg-success",
-  warning: "border-warning text-warning hover:!text-warning-foreground hover:!bg-warning",
-  danger: "border-danger text-danger hover:!text-danger-foreground hover:!bg-danger",
-  foreground: "border-foreground text-foreground hover:!bg-foreground"
-};
 var colorVariants = {
-  solid,
-  shadow,
-  bordered,
-  flat,
-  faded,
-  light,
-  ghost
+  bg,
+  rounded
 };
@@ -101,0 +46,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/utils/variants.d.ts

 declare const colorVariants: {
-    solid: {
-        default: string;
+    bg: {
         primary: string;
         secondary: string;
+        info: string;
         success: string;
         warning: string;
-        danger: string;
-        foreground: string;
+        error: string;
     };
-    shadow: {
-        default: string;
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        foreground: string;
+    rounded: {
+        sm: string;
+        md: string;
+        lg: string;
     };
-    bordered: {
-        default: string;
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        foreground: string;
-    };
-    flat: {
-        default: string;
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        foreground: string;
-    };
-    faded: {
-        default: string;
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        foreground: string;
-    };
-    light: {
-        default: string;
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        foreground: string;
-    };
-    ghost: {
-        default: string;
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        foreground: string;
-    };
 };
 
 export { colorVariants };

dist/utils/variants.js

@@ -26,73 +26,18 @@ "use strict";
 module.exports = __toCommonJS(variants_exports);
-var solid = {
-  default: "bg-default text-default-foreground",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  success: "bg-success text-success-foreground",
-  warning: "bg-warning text-warning-foreground",
-  danger: "bg-danger text-danger-foreground",
-  foreground: "bg-foreground text-background"
+var bg = {
+  primary: "bg-primary-light dark:bg-primary-dark",
+  secondary: "bg-secondary-light dark:bg-secondary-dark",
+  info: "bg-info-light dark:bg-info-dark",
+  success: "bg-success-light dark:bg-success-dark",
+  warning: "bg-warning-light dark:bg-warning-dark",
+  error: "bg-error-light dark:bg-error-dark"
 };
-var shadow = {
-  default: "shadow-lg shadow-default/50 bg-default text-default-foreground",
-  primary: "shadow-lg shadow-primary/40 bg-primary text-primary-foreground",
-  secondary: "shadow-lg shadow-secondary/40 bg-secondary text-secondary-foreground",
-  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
-  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
-  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
-  foreground: "shadow-lg shadow-foreground/40 bg-foreground text-background"
+var rounded = {
+  sm: "rounded",
+  md: "rounded-lg",
+  lg: "rounded-2xl"
 };
-var bordered = {
-  default: "bg-transparent border-default text-foreground",
-  primary: "bg-transparent border-primary text-primary",
-  secondary: "bg-transparent border-secondary text-secondary",
-  success: "bg-transparent border-success text-success",
-  warning: "bg-transparent border-warning text-warning",
-  danger: "bg-transparent border-danger text-danger",
-  foreground: "bg-transparent border-foreground text-foreground"
-};
-var flat = {
-  default: "bg-default/40 text-default-foreground",
-  primary: "bg-primary/20 text-primary",
-  secondary: "bg-secondary/20 text-secondary",
-  success: "bg-success/20 text-success-600 dark:text-success",
-  warning: "bg-warning/20 text-warning-600 dark:text-warning",
-  danger: "bg-danger/20 text-danger dark:text-danger-500",
-  foreground: "bg-foreground/10 text-foreground"
-};
-var faded = {
-  default: "border-default bg-default-100 text-default-foreground",
-  primary: "border-default bg-default-100 text-primary",
-  secondary: "border-default bg-default-100 text-secondary",
-  success: "border-default bg-default-100 text-success",
-  warning: "border-default bg-default-100 text-warning",
-  danger: "border-default bg-default-100 text-danger",
-  foreground: "border-default bg-default-100 text-foreground"
-};
-var light = {
-  default: "bg-transparent text-default-foreground",
-  primary: "bg-transparent text-primary",
-  secondary: "bg-transparent text-secondary",
-  success: "bg-transparent text-success",
-  warning: "bg-transparent text-warning",
-  danger: "bg-transparent text-danger",
-  foreground: "bg-transparent text-foreground"
-};
-var ghost = {
-  default: "border-default text-default-foreground hover:!bg-default",
-  primary: "border-primary text-primary hover:!text-primary-foreground hover:!bg-primary",
-  secondary: "border-secondary text-secondary hover:text-secondary-foreground hover:!bg-secondary",
-  success: "border-success text-success hover:!text-success-foreground hover:!bg-success",
-  warning: "border-warning text-warning hover:!text-warning-foreground hover:!bg-warning",
-  danger: "border-danger text-danger hover:!text-danger-foreground hover:!bg-danger",
-  foreground: "border-foreground text-foreground hover:!bg-foreground"
-};
 var colorVariants = {
-  solid,
-  shadow,
-  bordered,
-  flat,
-  faded,
-  light,
-  ghost
+  bg,
+  rounded
 };
@@ -99,0 +44,0 @@ // Annotate the CommonJS export names for ESM import in node:

package.json

 {
   "name": "@nkey-ui/theme",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "The default theme for NkeyUI components",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Number of package files

108

increased by3.85%

Lines of code

4868

increased by3.05%

Worsened metrics

Total package byte prevSize

136236

decreased by-0.97%

No dependency changes