@okam/next-component 1.2.3 → 1.3.0

package/theme/AdminBar/index.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tailwindVariants = require("tailwind-variants");
+const adminBarContainer = tailwindVariants.tv({
+  base: "w-full bg-gray-100 py-2 px-4 border-gray-200 fixed left-0 right-0 z-50",
+  variants: {
+    position: {
+      top: "top-0 border-b",
+      bottom: "bottom-0 border-t"
+    },
+    fullWidth: {
+      true: "max-w-full"
+    },
+    background: {
+      grey: "bg-gray-100",
+      dark: "bg-gray-800 text-white",
+      light: "bg-white"
+    },
+    padding: {
+      small: "py-1 px-2",
+      medium: "py-2 px-4",
+      large: "py-3 px-6"
+    }
+  },
+  defaultVariants: {
+    position: "top",
+    background: "grey",
+    padding: "medium"
+  }
+});
+const adminBarContent = tailwindVariants.tv({
+  base: "flex items-center",
+  variants: {
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    gap: {
+      small: "gap-2",
+      medium: "gap-4",
+      large: "gap-6"
+    },
+    wrap: {
+      true: "flex-wrap",
+      false: "flex-nowrap"
+    }
+  },
+  defaultVariants: {
+    justify: "between",
+    gap: "medium",
+    wrap: false
+  }
+});
+const adminBarButton = tailwindVariants.tv({
+  base: "px-3 py-1 rounded text-sm font-medium transition-colors",
+  variants: {
+    variant: {
+      primary: "bg-blue-600 text-white hover:bg-blue-700",
+      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
+      danger: "bg-red-600 text-white hover:bg-red-700"
+    },
+    size: {
+      small: "text-xs px-2 py-0.5",
+      medium: "text-sm px-3 py-1",
+      large: "text-base px-4 py-2"
+    }
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "medium"
+  }
+});
+const adminBarError = tailwindVariants.tv({
+  base: "flex items-center justify-center bg-red-50 text-red-700 px-3 py-1 rounded-md text-sm",
+  variants: {
+    severity: {
+      low: "bg-yellow-50 text-yellow-700",
+      medium: "bg-red-50 text-red-700",
+      high: "bg-red-100 text-red-800 font-bold"
+    },
+    hasBorder: {
+      true: "border border-red-300",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    severity: "medium",
+    hasBorder: true
+  }
+});
+const adminBarErrorTypography = tailwindVariants.tv({
+  base: "text-red-700 text-sm font-medium",
+  variants: {
+    severity: {
+      low: "text-yellow-700",
+      medium: "text-red-700",
+      high: "text-red-800 font-bold"
+    }
+  },
+  defaultVariants: {
+    severity: "medium"
+  }
+});
+const adminBarTheme = {
+  container: adminBarContainer,
+  content: adminBarContent,
+  button: adminBarButton,
+  error: adminBarError,
+  errorTypography: adminBarErrorTypography
+};
+exports.adminBarButton = adminBarButton;
+exports.adminBarContainer = adminBarContainer;
+exports.adminBarContent = adminBarContent;
+exports.adminBarError = adminBarError;
+exports.adminBarErrorTypography = adminBarErrorTypography;
+exports.adminBarTheme = adminBarTheme;

package/theme/AdminBar/index.mjs

@@ -0,0 +1,120 @@
+import { tv } from "tailwind-variants";
+const adminBarContainer = tv({
+  base: "w-full bg-gray-100 py-2 px-4 border-gray-200 fixed left-0 right-0 z-50",
+  variants: {
+    position: {
+      top: "top-0 border-b",
+      bottom: "bottom-0 border-t"
+    },
+    fullWidth: {
+      true: "max-w-full"
+    },
+    background: {
+      grey: "bg-gray-100",
+      dark: "bg-gray-800 text-white",
+      light: "bg-white"
+    },
+    padding: {
+      small: "py-1 px-2",
+      medium: "py-2 px-4",
+      large: "py-3 px-6"
+    }
+  },
+  defaultVariants: {
+    position: "top",
+    background: "grey",
+    padding: "medium"
+  }
+});
+const adminBarContent = tv({
+  base: "flex items-center",
+  variants: {
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    gap: {
+      small: "gap-2",
+      medium: "gap-4",
+      large: "gap-6"
+    },
+    wrap: {
+      true: "flex-wrap",
+      false: "flex-nowrap"
+    }
+  },
+  defaultVariants: {
+    justify: "between",
+    gap: "medium",
+    wrap: false
+  }
+});
+const adminBarButton = tv({
+  base: "px-3 py-1 rounded text-sm font-medium transition-colors",
+  variants: {
+    variant: {
+      primary: "bg-blue-600 text-white hover:bg-blue-700",
+      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
+      danger: "bg-red-600 text-white hover:bg-red-700"
+    },
+    size: {
+      small: "text-xs px-2 py-0.5",
+      medium: "text-sm px-3 py-1",
+      large: "text-base px-4 py-2"
+    }
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "medium"
+  }
+});
+const adminBarError = tv({
+  base: "flex items-center justify-center bg-red-50 text-red-700 px-3 py-1 rounded-md text-sm",
+  variants: {
+    severity: {
+      low: "bg-yellow-50 text-yellow-700",
+      medium: "bg-red-50 text-red-700",
+      high: "bg-red-100 text-red-800 font-bold"
+    },
+    hasBorder: {
+      true: "border border-red-300",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    severity: "medium",
+    hasBorder: true
+  }
+});
+const adminBarErrorTypography = tv({
+  base: "text-red-700 text-sm font-medium",
+  variants: {
+    severity: {
+      low: "text-yellow-700",
+      medium: "text-red-700",
+      high: "text-red-800 font-bold"
+    }
+  },
+  defaultVariants: {
+    severity: "medium"
+  }
+});
+const adminBarTheme = {
+  container: adminBarContainer,
+  content: adminBarContent,
+  button: adminBarButton,
+  error: adminBarError,
+  errorTypography: adminBarErrorTypography
+};
+export {
+  adminBarButton,
+  adminBarContainer,
+  adminBarContent,
+  adminBarError,
+  adminBarErrorTypography,
+  adminBarTheme
+};

package/theme/Button/index.d.ts

@@ -0,0 +1,149 @@
+declare const button: import('tailwind-variants').TVReturnType<{
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}, undefined, "\n    flex\n    items-center\n    justify-center\n    gap-4\n    transition\n    duration-300\n    ease-in-out\n    disabled:pointer-events-none\n    disabled:opacity-30\n    focus-ring-black\n  ", import('tailwind-variants/dist/config.js').TVConfig<{
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}, {
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}>, {
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}, undefined, "\n    flex\n    items-center\n    justify-center\n    gap-4\n    transition\n    duration-300\n    ease-in-out\n    disabled:pointer-events-none\n    disabled:opacity-30\n    focus-ring-black\n  ", import('tailwind-variants/dist/config.js').TVConfig<{
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}, {
+    type: {
+        button: string;
+        menu: string;
+    };
+    buttonStyle: {
+        default: string;
+        outline: string;
+        hollow: string;
+    };
+    intent: {
+        error: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+    shape: {
+        rounded: string;
+        circular: string;
+    };
+}>, unknown, unknown, undefined>>;
+export default button;

package/theme/Button/index.js

@@ -0,0 +1,75 @@
+"use strict";
+const tailwindVariants = require("tailwind-variants");
+const button = tailwindVariants.tv({
+  base: `
+    flex
+    items-center
+    justify-center
+    gap-4
+    transition
+    duration-300
+    ease-in-out
+    disabled:pointer-events-none
+    disabled:opacity-30
+    focus-ring-black
+  `,
+  defaultVariants: {
+    buttonStyle: "default",
+    type: "button",
+    size: "default",
+    shape: "rounded"
+  },
+  variants: {
+    type: {
+      button: "",
+      menu: "text-2xl"
+    },
+    buttonStyle: {
+      default: `
+            px-4
+            py-2
+            text-white
+            !bg-color-1-500
+            hover:!bg-color-1-400
+            active:!bg-color-1-400
+          `,
+      outline: `
+            px-4
+            py-2
+            bg-transparent
+            !border-color-1-500
+            border-2
+            text-color-1-500
+            hover:bg-color-1-500
+            hover:text-white
+            active:bg-color-1-500
+            active:text-white
+          `,
+      hollow: `
+            px-2
+            bg-transparent
+            text-color-1-500
+            hover:border-b-color-1-500
+            active:border-b-color-1-500
+            focus:border-b-color-1-500
+          `
+    },
+    intent: {
+      error: `
+            !bg-error
+            text-white
+            pointer-events-none
+            !border-error
+          `
+    },
+    size: {
+      default: `min-w-12 min-h-6`,
+      large: `min-w-36 min-h-18`
+    },
+    shape: {
+      rounded: `rounded-md`,
+      circular: `rounded-full`
+    }
+  }
+});
+module.exports = button;

package/theme/Button/index.mjs

@@ -0,0 +1,76 @@
+import { tv } from "tailwind-variants";
+const button = tv({
+  base: `
+    flex
+    items-center
+    justify-center
+    gap-4
+    transition
+    duration-300
+    ease-in-out
+    disabled:pointer-events-none
+    disabled:opacity-30
+    focus-ring-black
+  `,
+  defaultVariants: {
+    buttonStyle: "default",
+    type: "button",
+    size: "default",
+    shape: "rounded"
+  },
+  variants: {
+    type: {
+      button: "",
+      menu: "text-2xl"
+    },
+    buttonStyle: {
+      default: `
+            px-4
+            py-2
+            text-white
+            !bg-color-1-500
+            hover:!bg-color-1-400
+            active:!bg-color-1-400
+          `,
+      outline: `
+            px-4
+            py-2
+            bg-transparent
+            !border-color-1-500
+            border-2
+            text-color-1-500
+            hover:bg-color-1-500
+            hover:text-white
+            active:bg-color-1-500
+            active:text-white
+          `,
+      hollow: `
+            px-2
+            bg-transparent
+            text-color-1-500
+            hover:border-b-color-1-500
+            active:border-b-color-1-500
+            focus:border-b-color-1-500
+          `
+    },
+    intent: {
+      error: `
+            !bg-error
+            text-white
+            pointer-events-none
+            !border-error
+          `
+    },
+    size: {
+      default: `min-w-12 min-h-6`,
+      large: `min-w-36 min-h-18`
+    },
+    shape: {
+      rounded: `rounded-md`,
+      circular: `rounded-full`
+    }
+  }
+});
+export {
+  button as default
+};