@component-labs/ui 0.0.1

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../src/components/input/Input.tsx","../src/components/input/Input.docs.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\n\nconst inputVariants = cva(\n  [\n    \"w-full rounded-lg border px-3 py-2\",\n    \"text-sm font-medium\",\n    \"transition-all duration-200\",\n    \"focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    \"placeholder:text-gray-400 dark:placeholder:text-gray-500\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: [\n          \"bg-white dark:bg-gray-900\",\n          \"border-gray-300 dark:border-gray-700\",\n          \"text-gray-900 dark:text-gray-100\",\n          \"hover:border-gray-400 dark:hover:border-gray-600\",\n        ],\n        outline: [\n          \"bg-transparent\",\n          \"border-primary-600 dark:border-primary-500\",\n          \"text-gray-900 dark:text-gray-100\",\n          \"hover:bg-primary-50 dark:hover:bg-primary-950\",\n        ],\n        error: [\n          \"bg-white dark:bg-gray-900\",\n          \"border-error-600 dark:border-error-500\",\n          \"text-gray-900 dark:text-gray-100\",\n          \"focus:ring-error-600\",\n        ],\n      },\n      size: {\n        sm: \"h-9 text-sm\",\n        md: \"h-10 text-base\",\n        lg: \"h-11 text-lg\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    VariantProps<typeof inputVariants> {\n  /** Label text above the input */\n  label?: ReactNode;\n  /** Helper text below the input */\n  helperText?: ReactNode;\n  /** Error message (sets variant to error automatically) */\n  error?: string;\n  /** Icon to display before the input text */\n  startIcon?: ReactNode;\n  /** Icon to display after the input text */\n  endIcon?: ReactNode;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      variant,\n      size,\n      label,\n      helperText,\n      error,\n      startIcon,\n      endIcon,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasError = Boolean(error);\n    const displayVariant = hasError ? \"error\" : variant;\n\n    return (\n      <div className=\"w-full space-y-1.5\">\n        {label && (\n          <label className=\"text-sm font-medium text-gray-900 dark:text-gray-100\">\n            {label}\n          </label>\n        )}\n        <div className=\"relative\">\n          {startIcon && (\n            <div className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500\">\n              {startIcon}\n            </div>\n          )}\n          <input\n            ref={ref}\n            className={cn(\n              inputVariants({ variant: displayVariant, size }),\n              startIcon && \"pl-10\",\n              endIcon && \"pr-10\",\n              className,\n            )}\n            {...props}\n          />\n          {endIcon && (\n            <div className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500\">\n              {endIcon}\n            </div>\n          )}\n        </div>\n        {(helperText || error) && (\n          <p\n            className={cn(\n              \"text-xs\",\n              hasError\n                ? \"text-error-600 dark:text-error-400\"\n                : \"text-gray-500 dark:text-gray-400\",\n            )}\n          >\n            {error || helperText}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n","import type { ComponentDoc } from \"../../types/docs\";\n\nexport const inputDocs: ComponentDoc = {\n  name: \"Input\",\n  description: \"Text input with validation, icon support, and accessible states.\",\n  category: \"Inputs\",\n  installation: `pnpm add @component-labs/ui`,\n  usage: `import { Input } from \"@component-labs/ui\";\n\n<Input placeholder=\"Enter your email\" />`,\n  props: [\n    {\n      name: \"variant\",\n      type: \"'default' | 'outline' | 'error'\",\n      description: \"Visual style variant\",\n      default: \"'default'\",\n    },\n    {\n      name: \"size\",\n      type: \"'sm' | 'md' | 'lg'\",\n      description: \"Size of the input\",\n      default: \"'md'\",\n    },\n    {\n      name: \"label\",\n      type: \"ReactNode\",\n      description: \"Label text above the input\",\n    },\n    {\n      name: \"helperText\",\n      type: \"ReactNode\",\n      description: \"Helper text below the input\",\n    },\n    {\n      name: \"error\",\n      type: \"string\",\n      description: \"Error message (automatically sets variant to error)\",\n    },\n    {\n      name: \"startIcon\",\n      type: \"ReactNode\",\n      description: \"Icon to display before the input text\",\n    },\n    {\n      name: \"endIcon\",\n      type: \"ReactNode\",\n      description: \"Icon to display after the input text\",\n    },\n    {\n      name: \"placeholder\",\n      type: \"string\",\n      description: \"Placeholder text\",\n    },\n    {\n      name: \"disabled\",\n      type: \"boolean\",\n      description: \"Whether the input is disabled\",\n      default: \"false\",\n    },\n  ],\n  examples: [\n    {\n      title: \"Basic Input\",\n      code: `<Input placeholder=\"Enter your email\" />`,\n      description: \"Simple text input\",\n    },\n    {\n      title: \"With Label\",\n      code: `<Input\n  label=\"Email Address\"\n  placeholder=\"you@example.com\"\n  type=\"email\"\n/>`,\n      description: \"Input with label\",\n    },\n    {\n      title: \"With Helper Text\",\n      code: `<Input\n  label=\"Username\"\n  helperText=\"Must be unique and at least 3 characters\"\n  placeholder=\"johndoe\"\n/>`,\n      description: \"Input with helper text\",\n    },\n    {\n      title: \"With Error\",\n      code: `<Input\n  label=\"Email\"\n  error=\"Please enter a valid email address\"\n  value=\"invalid-email\"\n/>`,\n      description: \"Input with error state\",\n    },\n    {\n      title: \"With Icons\",\n      code: `<div className=\"space-y-4\">\n  <Input\n    label=\"Search\"\n    placeholder=\"Search...\"\n    startIcon={<SearchIcon />}\n  />\n  <Input\n    label=\"Password\"\n    type=\"password\"\n    endIcon={<EyeIcon />}\n  />\n</div>`,\n      description: \"Inputs with start and end icons\",\n    },\n    {\n      title: \"Sizes\",\n      code: `<div className=\"space-y-4\">\n  <Input size=\"sm\" placeholder=\"Small input\" />\n  <Input size=\"md\" placeholder=\"Medium input\" />\n  <Input size=\"lg\" placeholder=\"Large input\" />\n</div>`,\n      description: \"Different input sizes\",\n    },\n    {\n      title: \"Disabled State\",\n      code: `<Input\n  label=\"Disabled Input\"\n  placeholder=\"Cannot edit\"\n  disabled\n/>`,\n      description: \"Disabled input\",\n    },\n  ],\n  accessibility: [\n    \"Proper label association with input\",\n    \"ARIA attributes for error states\",\n    \"Focus visible states with ring indicator\",\n    \"Disabled state prevents interaction\",\n    \"Helper text announced by screen readers\",\n  ],\n};\n"],"names":["inputVariants","cva","Input","forwardRef","variant","size","label","helperText","error","startIcon","endIcon","className","props","ref","hasError","jsxs","jsx","cn","inputDocs"],"mappings":";;;AAIA,MAAMA,IAAgBC;AAAA,EACpB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAiBaC,IAAQC;AAAA,EACnB,CACE;AAAA,IACE,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAW,EAAQN;AAGzB,WACE,gBAAAO,EAAC,OAAA,EAAI,WAAU,sBACZ,UAAA;AAAA,MAAAT,KACC,gBAAAU,EAAC,SAAA,EAAM,WAAU,wDACd,UAAAV,GACH;AAAA,MAEF,gBAAAS,EAAC,OAAA,EAAI,WAAU,YACZ,UAAA;AAAA,QAAAN,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,iGACZ,UAAAP,GACH;AAAA,QAEF,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAH;AAAA,YACA,WAAWI;AAAA,cACTjB,EAAc,EAAE,SAlBHc,IAAW,UAAUV,GAkBO,MAAAC,GAAM;AAAA,cAC/CI,KAAa;AAAA,cACbC,KAAW;AAAA,cACXC;AAAA,YAAA;AAAA,YAED,GAAGC;AAAA,UAAA;AAAA,QAAA;AAAA,QAELF,KACC,gBAAAM,EAAC,OAAA,EAAI,WAAU,kGACZ,UAAAN,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,OACEH,KAAcC,MACd,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,YACAH,IACI,uCACA;AAAA,UAAA;AAAA,UAGL,UAAAN,KAASD;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GAEJ;AAAA,EAEJ;AACF;AAEAL,EAAM,cAAc;AC7Hb,MAAMgB,IAA0B;AAAA,EACrC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,UAAU;AAAA,EACV,cAAc;AAAA,EACd,OAAO;AAAA;AAAA;AAAA,EAGP,OAAO;AAAA,IACL;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,IAEX;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,IAEX;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,UAAU;AAAA,IACR;AAAA,MACE,OAAO;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,OAAO;AAAA,MACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,MAKN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,OAAO;AAAA,MACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,MAKN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,OAAO;AAAA,MACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,MAKN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,OAAO;AAAA,MACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,OAAO;AAAA,MACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,MAKN,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,OAAO;AAAA,MACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,MAKN,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,eAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/lib/IntersectionObserver.d.ts

@@ -0,0 +1,30 @@
+interface IntersectionObserverProps {
+    onIntersect: () => void;
+    enabled?: boolean;
+    rootMargin?: string;
+    threshold?: number;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Reusable Intersection Observer component
+ * Triggers a callback when the component enters the viewport
+ *
+ * @param onIntersect - Callback to trigger when element intersects
+ * @param enabled - Whether the observer is active (default: true)
+ * @param rootMargin - Margin around the root (default: "100px")
+ * @param threshold - Intersection threshold 0-1 (default: 0.1)
+ * @param children - Optional children to render
+ * @param className - Optional CSS classes
+ */
+export declare function IntersectionObserver({ onIntersect, enabled, rootMargin, threshold, children, className, }: IntersectionObserverProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Simpler hook-based version if you want more control
+ */
+export declare function useIntersectionObserver(callback: () => void, options?: {
+    enabled?: boolean;
+    rootMargin?: string;
+    threshold?: number;
+}): import('react').RefObject<HTMLDivElement | null>;
+export {};
+//# sourceMappingURL=IntersectionObserver.d.ts.map

package/dist/lib/IntersectionObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/lib/IntersectionObserver.tsx"],"names":[],"mappings":"AAIA,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,WAAW,EACX,OAAc,EACd,UAAoB,EACpB,SAAe,EACf,QAAQ,EACR,SAAc,GACf,EAAE,yBAAyB,2CAgC3B;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,MAAM,IAAI,EACpB,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,oDA8BF"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,7 @@
+import { ClassValue } from 'clsx';
+
+/**
+ * Merge Tailwind CSS classes with proper precedence
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/menu.d.ts

@@ -0,0 +1,4 @@
+export { Menu } from './components/menu/Menu';
+export type { MenuRootProps, MenuTriggerProps, MenuContentProps, MenuItemComponentProps as MenuItemProps, MenuItemCheckboxComponentProps as MenuItemCheckboxProps, MenuSeparatorComponentProps as MenuSeparatorProps, } from './components/menu/Menu';
+export { menuDocs } from './components/menu/Menu.docs';
+//# sourceMappingURL=menu.d.ts.map

package/dist/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,IAAI,aAAa,EACvC,8BAA8B,IAAI,qBAAqB,EACvD,2BAA2B,IAAI,kBAAkB,GAClD,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC"}