@beyondcorp/beyond-ui 1.2.81 → 1.2.85

package/dist/components/Alert/Alert.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.example.js","sources":["../../../src/components/Alert/Alert.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Alert, AlertTitle, AlertDescription } from \"./Alert\";\r\n\r\nexport const AlertExample: React.FC = () => (\r\n  <div className=\"space-y-4\">\r\n    <Alert variant=\"info\">\r\n      <AlertTitle>Information</AlertTitle>\r\n      <AlertDescription>This is an informational alert message.</AlertDescription>\r\n    </Alert>\r\n    <Alert variant=\"success\">\r\n      <AlertTitle>Success</AlertTitle>\r\n      <AlertDescription>Operation completed successfully!</AlertDescription>\r\n    </Alert>\r\n    <Alert variant=\"warning\">\r\n      <AlertTitle>Warning</AlertTitle>\r\n      <AlertDescription>Please review your input before proceeding.</AlertDescription>\r\n    </Alert>\r\n    <Alert variant=\"danger\">\r\n      <AlertTitle>Error</AlertTitle>\r\n      <AlertDescription>Something went wrong. Please try again.</AlertDescription>\r\n    </Alert>\r\n  </div>\r\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,YAAY,GAAa,OACpCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CACxBA,IAAA,CAAC,KAAK,IAAC,OAAO,EAAC,MAAM,EAAA,QAAA,EAAA,CACnBC,IAAC,UAAU,EAAA,EAAA,QAAA,EAAA,aAAA,EAAA,CAAyB,EACpCA,GAAA,CAAC,gBAAgB,EAAA,EAAA,QAAA,EAAA,yCAAA,EAAA,CAA2D,CAAA,EAAA,CACtE,EACRD,IAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,CACtBC,IAAC,UAAU,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAqB,EAChCA,GAAA,CAAC,gBAAgB,EAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,CAAqD,CAAA,EAAA,CAChE,EACRD,IAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,aACtBC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAqB,EAChCA,IAAC,gBAAgB,EAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,CAA+D,CAAA,EAAA,CAC1E,EACRD,KAAC,KAAK,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAA,QAAA,EAAA,CACrBC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAmB,EAC9BA,GAAA,CAAC,gBAAgB,0DAA2D,CAAA,EAAA,CACtE,CAAA,EAAA,CACJ;;;;"}
+{"version":3,"file":"Alert.example.js","sources":["../../../src/components/Alert/Alert.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Alert, AlertTitle, AlertDescription } from \"./Alert\";\n\nexport const AlertExample: React.FC = () => (\n  <div className=\"space-y-4\">\n    <Alert variant=\"info\">\n      <AlertTitle>Information</AlertTitle>\n      <AlertDescription>This is an informational alert message.</AlertDescription>\n    </Alert>\n    <Alert variant=\"success\">\n      <AlertTitle>Success</AlertTitle>\n      <AlertDescription>Operation completed successfully!</AlertDescription>\n    </Alert>\n    <Alert variant=\"warning\">\n      <AlertTitle>Warning</AlertTitle>\n      <AlertDescription>Please review your input before proceeding.</AlertDescription>\n    </Alert>\n    <Alert variant=\"danger\">\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>Something went wrong. Please try again.</AlertDescription>\n    </Alert>\n  </div>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,YAAY,GAAa,OACpCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CACxBA,IAAA,CAAC,KAAK,IAAC,OAAO,EAAC,MAAM,EAAA,QAAA,EAAA,CACnBC,IAAC,UAAU,EAAA,EAAA,QAAA,EAAA,aAAA,EAAA,CAAyB,EACpCA,GAAA,CAAC,gBAAgB,EAAA,EAAA,QAAA,EAAA,yCAAA,EAAA,CAA2D,CAAA,EAAA,CACtE,EACRD,IAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,CACtBC,IAAC,UAAU,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAqB,EAChCA,GAAA,CAAC,gBAAgB,EAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,CAAqD,CAAA,EAAA,CAChE,EACRD,IAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,aACtBC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAqB,EAChCA,IAAC,gBAAgB,EAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,CAA+D,CAAA,EAAA,CAC1E,EACRD,KAAC,KAAK,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAA,QAAA,EAAA,CACrBC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAmB,EAC9BA,GAAA,CAAC,gBAAgB,0DAA2D,CAAA,EAAA,CACtE,CAAA,EAAA,CACJ;;;;"}

package/dist/components/Auth/LoginForm.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoginForm.example.js","sources":["../../../src/components/Auth/LoginForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { LoginForm } from \"./LoginForm\";\r\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\r\nimport { AuthProvider } from \"../../contexts/AuthContext\";\r\n\r\nexport const LoginFormExample: React.FC = () => (\r\n  <AuthProvider>\r\n    <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\r\n      <Card className=\"w-full max-w-md\">\r\n        <CardHeader>\r\n          <CardTitle>Login</CardTitle>\r\n        </CardHeader>\r\n        <CardContent>\r\n          <LoginForm />\r\n        </CardContent>\r\n      </Card>\r\n    </div>\r\n  </AuthProvider>\r\n);"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKO,MAAM,gBAAgB,GAAa,OACxCA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,YAC3EC,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAkB,GACjB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CACD,IACT,EAAA,CACH,EAAA,CACO;;;;"}
+{"version":3,"file":"LoginForm.example.js","sources":["../../../src/components/Auth/LoginForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { LoginForm } from \"./LoginForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { AuthProvider } from \"../../contexts/AuthContext\";\n\nexport const LoginFormExample: React.FC = () => (\n  <AuthProvider>\n    <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Login</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <LoginForm />\n        </CardContent>\n      </Card>\n    </div>\n  </AuthProvider>\n);"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKO,MAAM,gBAAgB,GAAa,OACxCA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,YAC3EC,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAkB,GACjB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CACD,IACT,EAAA,CACH,EAAA,CACO;;;;"}

package/dist/components/Auth/PasswordResetForm.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordResetForm.example.js","sources":["../../../src/components/Auth/PasswordResetForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { PasswordResetForm } from \"./PasswordResetForm\";\r\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\r\nimport { toast } from \"react-hot-toast\";\r\n\r\nexport const PasswordResetFormExample: React.FC = () => {\r\n  const [loading, setLoading] = React.useState(false);\r\n\r\n  // Simulate async reset logic\r\n  const handleReset = async (email: string) => {\r\n    setLoading(true);\r\n    await new Promise((res) => setTimeout(res, 1300));\r\n    setLoading(false);\r\n    toast.success(`If an account exists for ${email}, a reset link was sent.`);\r\n  };\r\n\r\n  return (\r\n    <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\r\n      <Card className=\"w-full max-w-md\">\r\n        <CardHeader>\r\n          <CardTitle>Password Reset</CardTitle>\r\n        </CardHeader>\r\n        <CardContent>\r\n          <PasswordResetForm\r\n            onReset={handleReset}\r\n            isLoading={loading}\r\n          />\r\n        </CardContent>\r\n      </Card>\r\n    </div>\r\n  );\r\n};"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAKO,MAAM,wBAAwB,GAAa,MAAK;AACrD,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;;AAGnD,IAAA,MAAM,WAAW,GAAG,OAAO,KAAa,KAAI;QAC1C,UAAU,CAAC,IAAI,CAAC;AAChB,QAAA,MAAM,IAAI,OAAO,CAAC,CAAC,GAAG,KAAK,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACjD,UAAU,CAAC,KAAK,CAAC;AACjB,QAAA,KAAK,CAAC,OAAO,CAAC,4BAA4B,KAAK,CAAA,wBAAA,CAA0B,CAAC;AAC5E,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,YAC3EC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,CAA2B,EAAA,CAC1B,EACbA,IAAC,WAAW,EAAA,EAAA,QAAA,EACVA,IAAC,iBAAiB,EAAA,EAChB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,OAAO,EAAA,CAClB,GACU,CAAA,EAAA,CACT,EAAA,CACH;AAEV;;;;"}
+{"version":3,"file":"PasswordResetForm.example.js","sources":["../../../src/components/Auth/PasswordResetForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { PasswordResetForm } from \"./PasswordResetForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { toast } from \"react-hot-toast\";\n\nexport const PasswordResetFormExample: React.FC = () => {\n  const [loading, setLoading] = React.useState(false);\n\n  // Simulate async reset logic\n  const handleReset = async (email: string) => {\n    setLoading(true);\n    await new Promise((res) => setTimeout(res, 1300));\n    setLoading(false);\n    toast.success(`If an account exists for ${email}, a reset link was sent.`);\n  };\n\n  return (\n    <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Password Reset</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <PasswordResetForm\n            onReset={handleReset}\n            isLoading={loading}\n          />\n        </CardContent>\n      </Card>\n    </div>\n  );\n};"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAKO,MAAM,wBAAwB,GAAa,MAAK;AACrD,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;;AAGnD,IAAA,MAAM,WAAW,GAAG,OAAO,KAAa,KAAI;QAC1C,UAAU,CAAC,IAAI,CAAC;AAChB,QAAA,MAAM,IAAI,OAAO,CAAC,CAAC,GAAG,KAAK,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACjD,UAAU,CAAC,KAAK,CAAC;AACjB,QAAA,KAAK,CAAC,OAAO,CAAC,4BAA4B,KAAK,CAAA,wBAAA,CAA0B,CAAC;AAC5E,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,YAC3EC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,CAA2B,EAAA,CAC1B,EACbA,IAAC,WAAW,EAAA,EAAA,QAAA,EACVA,IAAC,iBAAiB,EAAA,EAChB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,OAAO,EAAA,CAClB,GACU,CAAA,EAAA,CACT,EAAA,CACH;AAEV;;;;"}

package/dist/components/Auth/PasswordResetForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordResetForm.js","sources":["../../../src/components/Auth/PasswordResetForm.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { Input } from \"../Input\";\r\nimport { Button } from \"../Button\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nconst schema = z.object({\r\n  email: z.string().min(1, \"Email is required\").email(\"Enter a valid email\")\r\n});\r\n\r\ntype PasswordResetFormData = z.infer<typeof schema>;\r\n\r\nexport interface PasswordResetFormProps {\r\n  onReset?: (email: string) => Promise<void> | void;\r\n  className?: string;\r\n  isLoading?: boolean;\r\n  successMessage?: string;\r\n  errorMessage?: string;\r\n}\r\n\r\nexport const PasswordResetForm: React.FC<PasswordResetFormProps> = ({\r\n  onReset,\r\n  className,\r\n  isLoading,\r\n  successMessage,\r\n  errorMessage\r\n}) => {\r\n  const {\r\n    register,\r\n    handleSubmit,\r\n    formState: { errors, isSubmitting, isSubmitSuccessful }\r\n  } = useForm<PasswordResetFormData>({ resolver: zodResolver(schema) });\r\n\r\n  const [status, setStatus] = React.useState<\"idle\" | \"success\" | \"error\">(\"idle\");\r\n\r\n  const onSubmit = async (data: PasswordResetFormData) => {\r\n    setStatus(\"idle\");\r\n    try {\r\n      await onReset?.(data.email);\r\n      setStatus(\"success\");\r\n    } catch (e) {\r\n      setStatus(\"error\");\r\n    }\r\n  };\r\n\r\n  return (\r\n    <form\r\n      onSubmit={handleSubmit(onSubmit)}\r\n      className={cn(\"space-y-6\", className)}\r\n      autoComplete=\"off\"\r\n      noValidate\r\n    >\r\n      <div>\r\n        <label className=\"block text-sm font-medium mb-1\" htmlFor=\"reset-email\">\r\n          Email Address\r\n        </label>\r\n        <Input\r\n          id=\"reset-email\"\r\n          type=\"email\"\r\n          autoComplete=\"email\"\r\n          placeholder=\"you@email.com\"\r\n          {...register(\"email\")}\r\n          disabled={isSubmitting || isLoading}\r\n          variant={errors.email ? \"error\" : \"default\"}\r\n        />\r\n        {errors.email && (\r\n          <div className=\"text-danger mt-1 text-xs\">{errors.email.message}</div>\r\n        )}\r\n      </div>\r\n      <Button\r\n        type=\"submit\"\r\n        variant=\"primary\"\r\n        disabled={isSubmitting || isLoading}\r\n        className=\"w-full\"\r\n      >\r\n        Send Password Reset Link\r\n      </Button>\r\n      {status === \"success\" && (\r\n        <div className=\"text-success-700 bg-success-50 border border-success-200 p-2 text-sm rounded text-center\">\r\n          {successMessage || \"A password reset link was sent if the address exists in our system.\"}\r\n        </div>\r\n      )}\r\n      {status === \"error\" && (\r\n        <div className=\"text-danger-700 bg-danger-50 border border-danger-200 p-2 text-sm rounded text-center\">\r\n          {errorMessage || \"There was an error submitting. Please try again.\"}\r\n        </div>\r\n      )}\r\n    </form>\r\n  );\r\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAQA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;AACtB,IAAA,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,KAAK,CAAC,qBAAqB;AAC1E,CAAA,CAAC;AAYK,MAAM,iBAAiB,GAAqC,CAAC,EAClE,OAAO,EACP,SAAS,EACT,SAAS,EACT,cAAc,EACd,YAAY,EACb,KAAI;IACH,MAAM,EACJ,QAAQ,EACR,YAAY,EACZ,SAAS,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,kBAAkB,EAAE,EACxD,GAAG,OAAO,CAAwB,EAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC;AAErE,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAA+B,MAAM,CAAC;AAEhF,IAAA,MAAM,QAAQ,GAAG,OAAO,IAA2B,KAAI;QACrD,SAAS,CAAC,MAAM,CAAC;AACjB,QAAA,IAAI;AACF,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;YAC3B,SAAS,CAAC,SAAS,CAAC;QACtB;QAAE,OAAO,CAAC,EAAE;YACV,SAAS,CAAC,OAAO,CAAC;QACpB;AACF,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EAChC,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EACrC,YAAY,EAAC,KAAK,EAClB,UAAU,EAAA,IAAA,EAAA,QAAA,EAAA,CAEVA,yBACEC,GAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,gCAAgC,EAAC,OAAO,EAAC,aAAa,EAAA,QAAA,EAAA,eAAA,EAAA,CAE/D,EACRA,GAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAC,aAAa,EAChB,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,OAAO,EACpB,WAAW,EAAC,eAAe,EAAA,GACvB,QAAQ,CAAC,OAAO,CAAC,EACrB,QAAQ,EAAE,YAAY,IAAI,SAAS,EACnC,OAAO,EAAE,MAAM,CAAC,KAAK,GAAG,OAAO,GAAG,SAAS,EAAA,CAC3C,EACD,MAAM,CAAC,KAAK,KACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,EAAA,CAAO,CACvE,CAAA,EAAA,CACG,EACNA,GAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,YAAY,IAAI,SAAS,EACnC,SAAS,EAAC,QAAQ,EAAA,QAAA,EAAA,0BAAA,EAAA,CAGX,EACR,MAAM,KAAK,SAAS,KACnBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0FAA0F,EAAA,QAAA,EACtG,cAAc,IAAI,qEAAqE,EAAA,CACpF,CACP,EACA,MAAM,KAAK,OAAO,KACjBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uFAAuF,EAAA,QAAA,EACnG,YAAY,IAAI,kDAAkD,EAAA,CAC/D,CACP,CAAA,EAAA,CACI;AAEX;;;;"}
+{"version":3,"file":"PasswordResetForm.js","sources":["../../../src/components/Auth/PasswordResetForm.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { z } from \"zod\";\nimport { Input } from \"../Input\";\nimport { Button } from \"../Button\";\nimport { cn } from \"../../utils/cn\";\n\nconst schema = z.object({\n  email: z.string().min(1, \"Email is required\").email(\"Enter a valid email\")\n});\n\ntype PasswordResetFormData = z.infer<typeof schema>;\n\nexport interface PasswordResetFormProps {\n  onReset?: (email: string) => Promise<void> | void;\n  className?: string;\n  isLoading?: boolean;\n  successMessage?: string;\n  errorMessage?: string;\n}\n\nexport const PasswordResetForm: React.FC<PasswordResetFormProps> = ({\n  onReset,\n  className,\n  isLoading,\n  successMessage,\n  errorMessage\n}) => {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors, isSubmitting, isSubmitSuccessful }\n  } = useForm<PasswordResetFormData>({ resolver: zodResolver(schema) });\n\n  const [status, setStatus] = React.useState<\"idle\" | \"success\" | \"error\">(\"idle\");\n\n  const onSubmit = async (data: PasswordResetFormData) => {\n    setStatus(\"idle\");\n    try {\n      await onReset?.(data.email);\n      setStatus(\"success\");\n    } catch (e) {\n      setStatus(\"error\");\n    }\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit(onSubmit)}\n      className={cn(\"space-y-6\", className)}\n      autoComplete=\"off\"\n      noValidate\n    >\n      <div>\n        <label className=\"block text-sm font-medium mb-1\" htmlFor=\"reset-email\">\n          Email Address\n        </label>\n        <Input\n          id=\"reset-email\"\n          type=\"email\"\n          autoComplete=\"email\"\n          placeholder=\"you@email.com\"\n          {...register(\"email\")}\n          disabled={isSubmitting || isLoading}\n          variant={errors.email ? \"error\" : \"default\"}\n        />\n        {errors.email && (\n          <div className=\"text-danger mt-1 text-xs\">{errors.email.message}</div>\n        )}\n      </div>\n      <Button\n        type=\"submit\"\n        variant=\"primary\"\n        disabled={isSubmitting || isLoading}\n        className=\"w-full\"\n      >\n        Send Password Reset Link\n      </Button>\n      {status === \"success\" && (\n        <div className=\"text-success-700 bg-success-50 border border-success-200 p-2 text-sm rounded text-center\">\n          {successMessage || \"A password reset link was sent if the address exists in our system.\"}\n        </div>\n      )}\n      {status === \"error\" && (\n        <div className=\"text-danger-700 bg-danger-50 border border-danger-200 p-2 text-sm rounded text-center\">\n          {errorMessage || \"There was an error submitting. Please try again.\"}\n        </div>\n      )}\n    </form>\n  );\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAQA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;AACtB,IAAA,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,KAAK,CAAC,qBAAqB;AAC1E,CAAA,CAAC;AAYK,MAAM,iBAAiB,GAAqC,CAAC,EAClE,OAAO,EACP,SAAS,EACT,SAAS,EACT,cAAc,EACd,YAAY,EACb,KAAI;IACH,MAAM,EACJ,QAAQ,EACR,YAAY,EACZ,SAAS,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,kBAAkB,EAAE,EACxD,GAAG,OAAO,CAAwB,EAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC;AAErE,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAA+B,MAAM,CAAC;AAEhF,IAAA,MAAM,QAAQ,GAAG,OAAO,IAA2B,KAAI;QACrD,SAAS,CAAC,MAAM,CAAC;AACjB,QAAA,IAAI;AACF,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;YAC3B,SAAS,CAAC,SAAS,CAAC;QACtB;QAAE,OAAO,CAAC,EAAE;YACV,SAAS,CAAC,OAAO,CAAC;QACpB;AACF,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EAChC,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EACrC,YAAY,EAAC,KAAK,EAClB,UAAU,EAAA,IAAA,EAAA,QAAA,EAAA,CAEVA,yBACEC,GAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,gCAAgC,EAAC,OAAO,EAAC,aAAa,EAAA,QAAA,EAAA,eAAA,EAAA,CAE/D,EACRA,GAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAC,aAAa,EAChB,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,OAAO,EACpB,WAAW,EAAC,eAAe,EAAA,GACvB,QAAQ,CAAC,OAAO,CAAC,EACrB,QAAQ,EAAE,YAAY,IAAI,SAAS,EACnC,OAAO,EAAE,MAAM,CAAC,KAAK,GAAG,OAAO,GAAG,SAAS,EAAA,CAC3C,EACD,MAAM,CAAC,KAAK,KACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,EAAA,CAAO,CACvE,CAAA,EAAA,CACG,EACNA,GAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,YAAY,IAAI,SAAS,EACnC,SAAS,EAAC,QAAQ,EAAA,QAAA,EAAA,0BAAA,EAAA,CAGX,EACR,MAAM,KAAK,SAAS,KACnBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0FAA0F,EAAA,QAAA,EACtG,cAAc,IAAI,qEAAqE,EAAA,CACpF,CACP,EACA,MAAM,KAAK,OAAO,KACjBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uFAAuF,EAAA,QAAA,EACnG,YAAY,IAAI,kDAAkD,EAAA,CAC/D,CACP,CAAA,EAAA,CACI;AAEX;;;;"}

package/dist/components/Auth/ProtectedRoute.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProtectedRoute.example.js","sources":["../../../src/components/Auth/ProtectedRoute.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Button } from \"../Button\";\r\n\r\n/**\r\n * Simple demo: toggling a boolean to represent authenticated/unauthenticated.\r\n * This does NOT call login/logout to avoid backend/service dependencies,\r\n * and simply shows protected content or a message.\r\n */\r\nexport const ProtectedRouteExample: React.FC = () => {\r\n  const [authed, setAuthed] = React.useState(false);\r\n\r\n  return (\r\n    <div className=\"flex flex-col items-center gap-4 p-8 border rounded bg-background max-w-md mx-auto min-h-[200px]\">\r\n      <div>\r\n        <Button onClick={() => setAuthed((prev) => !prev)}>\r\n          {authed ? \"Logout\" : \"Login (Preview)\"}\r\n        </Button>\r\n      </div>\r\n      {authed ? (\r\n        <div className=\"p-4 text-success-700 bg-success-50 border border-success-200 rounded\">\r\n          This content is only visible if authenticated!\r\n        </div>\r\n      ) : (\r\n        <div className=\"p-4 text-danger-700 bg-danger-50 border border-danger-200 rounded\">\r\n          You must be logged in to view protected content.\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;AAGA;;;;AAIG;AACI,MAAM,qBAAqB,GAAa,MAAK;AAClD,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kGAAkG,EAAA,QAAA,EAAA,CAC/GC,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAAA,QAAA,EAC9C,MAAM,GAAG,QAAQ,GAAG,iBAAiB,EAAA,CAC/B,EAAA,CACL,EACL,MAAM,IACLA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sEAAsE,EAAA,QAAA,EAAA,gDAAA,EAAA,CAE/E,KAENA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mEAAmE,EAAA,QAAA,EAAA,kDAAA,EAAA,CAE5E,CACP,CAAA,EAAA,CACG;AAEV;;;;"}
+{"version":3,"file":"ProtectedRoute.example.js","sources":["../../../src/components/Auth/ProtectedRoute.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button } from \"../Button\";\n\n/**\n * Simple demo: toggling a boolean to represent authenticated/unauthenticated.\n * This does NOT call login/logout to avoid backend/service dependencies,\n * and simply shows protected content or a message.\n */\nexport const ProtectedRouteExample: React.FC = () => {\n  const [authed, setAuthed] = React.useState(false);\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-8 border rounded bg-background max-w-md mx-auto min-h-[200px]\">\n      <div>\n        <Button onClick={() => setAuthed((prev) => !prev)}>\n          {authed ? \"Logout\" : \"Login (Preview)\"}\n        </Button>\n      </div>\n      {authed ? (\n        <div className=\"p-4 text-success-700 bg-success-50 border border-success-200 rounded\">\n          This content is only visible if authenticated!\n        </div>\n      ) : (\n        <div className=\"p-4 text-danger-700 bg-danger-50 border border-danger-200 rounded\">\n          You must be logged in to view protected content.\n        </div>\n      )}\n    </div>\n  );\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;AAGA;;;;AAIG;AACI,MAAM,qBAAqB,GAAa,MAAK;AAClD,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kGAAkG,EAAA,QAAA,EAAA,CAC/GC,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAAA,QAAA,EAC9C,MAAM,GAAG,QAAQ,GAAG,iBAAiB,EAAA,CAC/B,EAAA,CACL,EACL,MAAM,IACLA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sEAAsE,EAAA,QAAA,EAAA,gDAAA,EAAA,CAE/E,KAENA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mEAAmE,EAAA,QAAA,EAAA,kDAAA,EAAA,CAE5E,CACP,CAAA,EAAA,CACG;AAEV;;;;"}

package/dist/components/Auth/SignupForm.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignupForm.example.js","sources":["../../../src/components/Auth/SignupForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { SignupForm } from \"./SignupForm\";\r\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\r\nimport { AuthProvider } from \"../../contexts/AuthContext\";\r\n\r\nexport const SignupFormExample: React.FC = () => (\r\n  <AuthProvider>\r\n    <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\r\n      <Card className=\"w-full max-w-md\">\r\n        <CardHeader>\r\n          <CardTitle>Sign Up</CardTitle>\r\n        </CardHeader>\r\n        <CardContent>\r\n          <SignupForm />\r\n        </CardContent>\r\n      </Card>\r\n    </div>\r\n  </AuthProvider>\r\n);"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKO,MAAM,iBAAiB,GAAa,OACzCA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,YAC3EC,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAoB,GACnB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,EAAA,CACF,IACT,EAAA,CACH,EAAA,CACO;;;;"}
+{"version":3,"file":"SignupForm.example.js","sources":["../../../src/components/Auth/SignupForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { SignupForm } from \"./SignupForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { AuthProvider } from \"../../contexts/AuthContext\";\n\nexport const SignupFormExample: React.FC = () => (\n  <AuthProvider>\n    <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Sign Up</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <SignupForm />\n        </CardContent>\n      </Card>\n    </div>\n  </AuthProvider>\n);"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKO,MAAM,iBAAiB,GAAa,OACzCA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,YAC3EC,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAoB,GACnB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,EAAA,CACF,IACT,EAAA,CACH,EAAA,CACO;;;;"}

package/dist/components/Avatar/Avatar.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.example.js","sources":["../../../src/components/Avatar/Avatar.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Avatar, AvatarImage, AvatarFallback } from \"./Avatar\";\r\n\r\nexport const AvatarExample: React.FC = () => (\r\n  <div className=\"flex gap-4\">\r\n    <Avatar>\r\n      <AvatarImage src=\"https://randomuser.me/api/portraits/men/32.jpg\" />\r\n      <AvatarFallback>AB</AvatarFallback>\r\n    </Avatar>\r\n    <Avatar>\r\n      <AvatarImage src=\"\" />\r\n      <AvatarFallback>CD</AvatarFallback>\r\n    </Avatar>\r\n    <Avatar>\r\n      <AvatarImage src=\"https://randomuser.me/api/portraits/women/44.jpg\" />\r\n      <AvatarFallback>EF</AvatarFallback>\r\n    </Avatar>\r\n  </div>\r\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,aAAa,GAAa,OACrCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,YAAY,EAAA,QAAA,EAAA,CACzBA,IAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CACLC,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAC,gDAAgD,EAAA,CAAG,EACpEA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAoB,CAAA,EAAA,CAC5B,EACTD,IAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CACLC,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAC,EAAE,EAAA,CAAG,EACtBA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAoB,CAAA,EAAA,CAC5B,EACTD,IAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CACLC,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAC,kDAAkD,EAAA,CAAG,EACtEA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAoB,CAAA,EAAA,CAC5B,CAAA,EAAA,CACL;;;;"}
+{"version":3,"file":"Avatar.example.js","sources":["../../../src/components/Avatar/Avatar.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"./Avatar\";\n\nexport const AvatarExample: React.FC = () => (\n  <div className=\"flex gap-4\">\n    <Avatar>\n      <AvatarImage src=\"https://randomuser.me/api/portraits/men/32.jpg\" />\n      <AvatarFallback>AB</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"\" />\n      <AvatarFallback>CD</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://randomuser.me/api/portraits/women/44.jpg\" />\n      <AvatarFallback>EF</AvatarFallback>\n    </Avatar>\n  </div>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,aAAa,GAAa,OACrCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,YAAY,EAAA,QAAA,EAAA,CACzBA,IAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CACLC,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAC,gDAAgD,EAAA,CAAG,EACpEA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAoB,CAAA,EAAA,CAC5B,EACTD,IAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CACLC,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAC,EAAE,EAAA,CAAG,EACtBA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAoB,CAAA,EAAA,CAC5B,EACTD,IAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CACLC,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAC,kDAAkD,EAAA,CAAG,EACtEA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAoB,CAAA,EAAA,CAC5B,CAAA,EAAA,CACL;;;;"}

package/dist/components/Badge/Badge.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.example.js","sources":["../../../src/components/Badge/Badge.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Badge } from \"./Badge\";\r\n\r\nexport const BadgeExample: React.FC = () => (\r\n  <div className=\"flex flex-wrap gap-2\">\r\n    <Badge>Default</Badge>\r\n    <Badge variant=\"secondary\">Secondary</Badge>\r\n    <Badge variant=\"success\">Success</Badge>\r\n    <Badge variant=\"danger\">Danger</Badge>\r\n    <Badge variant=\"warning\">Warning</Badge>\r\n    <Badge variant=\"outline\">Outline</Badge>\r\n  </div>\r\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,YAAY,GAAa,OACpCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAA,CACnCC,GAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,EACtBA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,WAAW,EAAA,QAAA,EAAA,WAAA,EAAA,CAAkB,EAC5CA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,EACxCA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAA,QAAA,EAAA,QAAA,EAAA,CAAe,EACtCA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,EACxCA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,CAAA,EAAA,CACpC;;;;"}
+{"version":3,"file":"Badge.example.js","sources":["../../../src/components/Badge/Badge.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Badge } from \"./Badge\";\n\nexport const BadgeExample: React.FC = () => (\n  <div className=\"flex flex-wrap gap-2\">\n    <Badge>Default</Badge>\n    <Badge variant=\"secondary\">Secondary</Badge>\n    <Badge variant=\"success\">Success</Badge>\n    <Badge variant=\"danger\">Danger</Badge>\n    <Badge variant=\"warning\">Warning</Badge>\n    <Badge variant=\"outline\">Outline</Badge>\n  </div>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,YAAY,GAAa,OACpCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAA,CACnCC,GAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,EACtBA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,WAAW,EAAA,QAAA,EAAA,WAAA,EAAA,CAAkB,EAC5CA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,EACxCA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAA,QAAA,EAAA,QAAA,EAAA,CAAe,EACtCA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,EACxCA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,SAAA,EAAA,CAAgB,CAAA,EAAA,CACpC;;;;"}

package/dist/components/Blog/BlogShowcase.js

@@ -22,45 +22,45 @@ const BlogShowcase = () => {
         setSelectedPost(null);
     };
     const codeExamples = {
-        singleBlog: `import { SingleBlogView } from '@/components/Blog';
-
-function BlogPost({ postId }) {
-  return (
-    <SingleBlogView
-      postId={postId}
-      onBackClick={() => navigate('/blog')}
-    />
-  );
+        singleBlog: `import { SingleBlogView } from '@/components/Blog';
+
+function BlogPost({ postId }) {
+  return (
+    <SingleBlogView
+      postId={postId}
+      onBackClick={() => navigate('/blog')}
+    />
+  );
 }`,
-        allBlogs: `import { AllBlogsView } from '@/components/Blog';
-
-function BlogIndex() {
-  return (
-    <AllBlogsView
-      onPostClick={(post) => navigate(\`/blog/\${post.slug}\`)}
-    />
-  );
+        allBlogs: `import { AllBlogsView } from '@/components/Blog';
+
+function BlogIndex() {
+  return (
+    <AllBlogsView
+      onPostClick={(post) => navigate(\`/blog/\${post.slug}\`)}
+    />
+  );
 }`,
-        layout: `import { BlogLayout } from '@/components/Blog';
-
-function BlogApp() {
-  return (
-    <BlogLayout currentView="allBlogs">
-      <AllBlogsView />
-    </BlogLayout>
-  );
+        layout: `import { BlogLayout } from '@/components/Blog';
+
+function BlogApp() {
+  return (
+    <BlogLayout currentView="allBlogs">
+      <AllBlogsView />
+    </BlogLayout>
+  );
 }`,
-        hooks: `import { useBlog, useComments } from '@/components/Blog/hooks';
-
-function BlogComponent() {
-  const { posts, loading, searchPosts } = useBlog();
-  const { comments, addComment } = useComments({ postId: '1' });
-  
-  return (
-    <div>
-      {/* Use blog data and functionality */}
-    </div>
-  );
+        hooks: `import { useBlog, useComments } from '@/components/Blog/hooks';
+
+function BlogComponent() {
+  const { posts, loading, searchPosts } = useBlog();
+  const { comments, addComment } = useComments({ postId: '1' });
+  
+  return (
+    <div>
+      {/* Use blog data and functionality */}
+    </div>
+  );
 }`,
     };
     return (jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "Blog System" }), jsx("p", { className: "text-gray-600 mt-1", children: "Comprehensive blog components with markdown support, comments, and navigation" })] }), jsxs(Badge, { variant: "outline", className: "flex items-center", children: [jsx(PenTool, { className: "h-4 w-4 mr-1" }), "Blog System"] })] }), jsxs(Tabs, { value: "demo", onValueChange: () => { }, children: [jsxs(TabsList, { children: [jsxs(TabsTrigger, { value: "demo", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Live Demo"] }), jsxs(TabsTrigger, { value: "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code Examples"] }), jsxs(TabsTrigger, { value: "features", children: [jsx(LayoutGrid, { className: "h-4 w-4 mr-2" }), "Features"] })] }), jsx(TabsContent, { value: "demo", className: "mt-6", children: jsx(Card, { children: jsx(CardContent, { className: "p-0", children: jsx("div", { className: "h-[800px] overflow-auto border border-gray-200 rounded-lg", children: jsx(BlogLayout, { currentView: currentView, currentPost: selectedPost || undefined, onNavigate: (view, data) => {

package/dist/components/Blog/BlogShowcase.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlogShowcase.js","sources":["../../../src/components/Blog/BlogShowcase.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { PenTool, LayoutGrid as Layout, Code, Eye } from 'lucide-react';\r\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\r\nimport { Badge } from '../Badge';\r\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\r\nimport { BlogLayout } from './BlogLayout';\r\nimport { AllBlogsView } from './AllBlogsView';\r\nimport { SingleBlogView } from './SingleBlogView';\r\nimport { showToast } from '../Toast';\r\nimport type { BlogPost } from './types';\r\n\r\nexport const BlogShowcase: React.FC = () => {\r\n  const [currentView, setCurrentView] = useState<'allBlogs' | 'singleBlog'>('allBlogs');\r\n  const [selectedPost, setSelectedPost] = useState<BlogPost | null>(null);\r\n\r\n  const handlePostClick = (post: BlogPost) => {\r\n    setSelectedPost(post);\r\n    setCurrentView('singleBlog');\r\n    showToast.info(`Viewing: ${post.title}`);\r\n  };\r\n\r\n  const handleBackClick = () => {\r\n    setCurrentView('allBlogs');\r\n    setSelectedPost(null);\r\n  };\r\n\r\n  const codeExamples = {\r\n    singleBlog: `import { SingleBlogView } from '@/components/Blog';\r\n\r\nfunction BlogPost({ postId }) {\r\n  return (\r\n    <SingleBlogView\r\n      postId={postId}\r\n      onBackClick={() => navigate('/blog')}\r\n    />\r\n  );\r\n}`,\r\n    allBlogs: `import { AllBlogsView } from '@/components/Blog';\r\n\r\nfunction BlogIndex() {\r\n  return (\r\n    <AllBlogsView\r\n      onPostClick={(post) => navigate(\\`/blog/\\${post.slug}\\`)}\r\n    />\r\n  );\r\n}`,\r\n    layout: `import { BlogLayout } from '@/components/Blog';\r\n\r\nfunction BlogApp() {\r\n  return (\r\n    <BlogLayout currentView=\"allBlogs\">\r\n      <AllBlogsView />\r\n    </BlogLayout>\r\n  );\r\n}`,\r\n    hooks: `import { useBlog, useComments } from '@/components/Blog/hooks';\r\n\r\nfunction BlogComponent() {\r\n  const { posts, loading, searchPosts } = useBlog();\r\n  const { comments, addComment } = useComments({ postId: '1' });\r\n  \r\n  return (\r\n    <div>\r\n      {/* Use blog data and functionality */}\r\n    </div>\r\n  );\r\n}`,\r\n  };\r\n\r\n  return (\r\n    <div className=\"space-y-6\">\r\n      {/* Header */}\r\n      <div className=\"flex items-center justify-between\">\r\n        <div>\r\n          <h1 className=\"text-2xl font-bold text-gray-900\">Blog System</h1>\r\n          <p className=\"text-gray-600 mt-1\">\r\n            Comprehensive blog components with markdown support, comments, and navigation\r\n          </p>\r\n        </div>\r\n        <Badge variant=\"outline\" className=\"flex items-center\">\r\n          <PenTool className=\"h-4 w-4 mr-1\" />\r\n          Blog System\r\n        </Badge>\r\n      </div>\r\n\r\n      {/* Tabs */}\r\n      <Tabs value=\"demo\" onValueChange={() => {}}>\r\n        <TabsList>\r\n          <TabsTrigger value=\"demo\">\r\n            <Eye className=\"h-4 w-4 mr-2\" />\r\n            Live Demo\r\n          </TabsTrigger>\r\n          <TabsTrigger value=\"code\">\r\n            <Code className=\"h-4 w-4 mr-2\" />\r\n            Code Examples\r\n          </TabsTrigger>\r\n          <TabsTrigger value=\"features\">\r\n            <Layout className=\"h-4 w-4 mr-2\" />\r\n            Features\r\n          </TabsTrigger>\r\n        </TabsList>\r\n\r\n        <TabsContent value=\"demo\" className=\"mt-6\">\r\n          <Card>\r\n            <CardContent className=\"p-0\">\r\n              <div className=\"h-[800px] overflow-auto border border-gray-200 rounded-lg\">\r\n                <BlogLayout\r\n                  currentView={currentView}\r\n                  currentPost={selectedPost || undefined}\r\n                  onNavigate={(view, data) => {\r\n                    if (view === 'search') {\r\n                      showToast.info(`Searching for: ${data.query}`);\r\n                    }\r\n                  }}\r\n                >\r\n                  {currentView === 'allBlogs' ? (\r\n                    <AllBlogsView onPostClick={handlePostClick} />\r\n                  ) : (\r\n                    <SingleBlogView\r\n                      postId={selectedPost?.id}\r\n                      onBackClick={handleBackClick}\r\n                    />\r\n                  )}\r\n                </BlogLayout>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n        </TabsContent>\r\n\r\n        <TabsContent value=\"code\" className=\"mt-6\">\r\n          <div className=\"space-y-6\">\r\n            {Object.entries(codeExamples).map(([key, code]) => (\r\n              <Card key={key}>\r\n                <CardHeader>\r\n                  <CardTitle className=\"capitalize\">{key.replace(/([A-Z])/g, ' $1')} Example</CardTitle>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm\">\r\n                    <code>{code}</code>\r\n                  </pre>\r\n                </CardContent>\r\n              </Card>\r\n            ))}\r\n          </div>\r\n        </TabsContent>\r\n\r\n        <TabsContent value=\"features\" className=\"mt-6\">\r\n          <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>SingleBlogView Features</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• Markdown rendering with syntax highlighting</li>\r\n                  <li>• Social sharing buttons (Twitter, Facebook, LinkedIn)</li>\r\n                  <li>• Reading time estimation</li>\r\n                  <li>• SEO-friendly meta tags</li>\r\n                  <li>• Author bio and profile integration</li>\r\n                  <li>• Related posts recommendations</li>\r\n                  <li>• Article statistics and engagement metrics</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>AllBlogsView Features</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• Responsive grid and list view modes</li>\r\n                  <li>• Advanced search and filtering</li>\r\n                  <li>• Category and tag-based filtering</li>\r\n                  <li>• Multiple sorting options</li>\r\n                  <li>• Infinite scroll pagination</li>\r\n                  <li>• Loading states and error handling</li>\r\n                  <li>• Mobile-responsive design</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>BlogSidebar Features</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• Table of contents with smooth scrolling</li>\r\n                  <li>• Active section highlighting</li>\r\n                  <li>• Recent and popular posts</li>\r\n                  <li>• Category navigation</li>\r\n                  <li>• Newsletter signup integration</li>\r\n                  <li>• Responsive sidebar behavior</li>\r\n                  <li>• Sticky positioning for better UX</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>Comment System Features</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• Nested comment replies support</li>\r\n                  <li>• Like/dislike functionality</li>\r\n                  <li>• Comment moderation and reporting</li>\r\n                  <li>• Real-time comment validation</li>\r\n                  <li>• User authentication integration</li>\r\n                  <li>• Responsive comment threading</li>\r\n                  <li>• Comment statistics and engagement</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>Custom Hooks</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• <strong>useBlog:</strong> Blog data management and filtering</li>\r\n                  <li>• <strong>useComments:</strong> Comment CRUD operations</li>\r\n                  <li>• <strong>useBlogNavigation:</strong> Table of contents and scrolling</li>\r\n                  <li>• Debounced search functionality</li>\r\n                  <li>• Pagination and infinite scroll support</li>\r\n                  <li>• Error handling and loading states</li>\r\n                  <li>• TypeScript support throughout</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>Technical Features</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• React 18+ with modern hooks patterns</li>\r\n                  <li>• Complete TypeScript support</li>\r\n                  <li>• Markdown rendering with react-markdown</li>\r\n                  <li>• Syntax highlighting for code blocks</li>\r\n                  <li>• SEO optimization with meta tags</li>\r\n                  <li>• Responsive design with mobile-first approach</li>\r\n                  <li>• Accessibility features (ARIA labels, keyboard nav)</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n          </div>\r\n        </TabsContent>\r\n      </Tabs>\r\n    </div>\r\n  );\r\n};"],"names":["_jsxs","_jsx","Layout"],"mappings":"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"}
+{"version":3,"file":"BlogShowcase.js","sources":["../../../src/components/Blog/BlogShowcase.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { PenTool, LayoutGrid as Layout, Code, Eye } from 'lucide-react';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Badge } from '../Badge';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\nimport { BlogLayout } from './BlogLayout';\nimport { AllBlogsView } from './AllBlogsView';\nimport { SingleBlogView } from './SingleBlogView';\nimport { showToast } from '../Toast';\nimport type { BlogPost } from './types';\n\nexport const BlogShowcase: React.FC = () => {\n  const [currentView, setCurrentView] = useState<'allBlogs' | 'singleBlog'>('allBlogs');\n  const [selectedPost, setSelectedPost] = useState<BlogPost | null>(null);\n\n  const handlePostClick = (post: BlogPost) => {\n    setSelectedPost(post);\n    setCurrentView('singleBlog');\n    showToast.info(`Viewing: ${post.title}`);\n  };\n\n  const handleBackClick = () => {\n    setCurrentView('allBlogs');\n    setSelectedPost(null);\n  };\n\n  const codeExamples = {\n    singleBlog: `import { SingleBlogView } from '@/components/Blog';\n\nfunction BlogPost({ postId }) {\n  return (\n    <SingleBlogView\n      postId={postId}\n      onBackClick={() => navigate('/blog')}\n    />\n  );\n}`,\n    allBlogs: `import { AllBlogsView } from '@/components/Blog';\n\nfunction BlogIndex() {\n  return (\n    <AllBlogsView\n      onPostClick={(post) => navigate(\\`/blog/\\${post.slug}\\`)}\n    />\n  );\n}`,\n    layout: `import { BlogLayout } from '@/components/Blog';\n\nfunction BlogApp() {\n  return (\n    <BlogLayout currentView=\"allBlogs\">\n      <AllBlogsView />\n    </BlogLayout>\n  );\n}`,\n    hooks: `import { useBlog, useComments } from '@/components/Blog/hooks';\n\nfunction BlogComponent() {\n  const { posts, loading, searchPosts } = useBlog();\n  const { comments, addComment } = useComments({ postId: '1' });\n  \n  return (\n    <div>\n      {/* Use blog data and functionality */}\n    </div>\n  );\n}`,\n  };\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-bold text-gray-900\">Blog System</h1>\n          <p className=\"text-gray-600 mt-1\">\n            Comprehensive blog components with markdown support, comments, and navigation\n          </p>\n        </div>\n        <Badge variant=\"outline\" className=\"flex items-center\">\n          <PenTool className=\"h-4 w-4 mr-1\" />\n          Blog System\n        </Badge>\n      </div>\n\n      {/* Tabs */}\n      <Tabs value=\"demo\" onValueChange={() => {}}>\n        <TabsList>\n          <TabsTrigger value=\"demo\">\n            <Eye className=\"h-4 w-4 mr-2\" />\n            Live Demo\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <Code className=\"h-4 w-4 mr-2\" />\n            Code Examples\n          </TabsTrigger>\n          <TabsTrigger value=\"features\">\n            <Layout className=\"h-4 w-4 mr-2\" />\n            Features\n          </TabsTrigger>\n        </TabsList>\n\n        <TabsContent value=\"demo\" className=\"mt-6\">\n          <Card>\n            <CardContent className=\"p-0\">\n              <div className=\"h-[800px] overflow-auto border border-gray-200 rounded-lg\">\n                <BlogLayout\n                  currentView={currentView}\n                  currentPost={selectedPost || undefined}\n                  onNavigate={(view, data) => {\n                    if (view === 'search') {\n                      showToast.info(`Searching for: ${data.query}`);\n                    }\n                  }}\n                >\n                  {currentView === 'allBlogs' ? (\n                    <AllBlogsView onPostClick={handlePostClick} />\n                  ) : (\n                    <SingleBlogView\n                      postId={selectedPost?.id}\n                      onBackClick={handleBackClick}\n                    />\n                  )}\n                </BlogLayout>\n              </div>\n            </CardContent>\n          </Card>\n        </TabsContent>\n\n        <TabsContent value=\"code\" className=\"mt-6\">\n          <div className=\"space-y-6\">\n            {Object.entries(codeExamples).map(([key, code]) => (\n              <Card key={key}>\n                <CardHeader>\n                  <CardTitle className=\"capitalize\">{key.replace(/([A-Z])/g, ' $1')} Example</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm\">\n                    <code>{code}</code>\n                  </pre>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        </TabsContent>\n\n        <TabsContent value=\"features\" className=\"mt-6\">\n          <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n            <Card>\n              <CardHeader>\n                <CardTitle>SingleBlogView Features</CardTitle>\n              </CardHeader>\n              <CardContent>\n                <ul className=\"space-y-2 text-sm text-gray-600\">\n                  <li>• Markdown rendering with syntax highlighting</li>\n                  <li>• Social sharing buttons (Twitter, Facebook, LinkedIn)</li>\n                  <li>• Reading time estimation</li>\n                  <li>• SEO-friendly meta tags</li>\n                  <li>• Author bio and profile integration</li>\n                  <li>• Related posts recommendations</li>\n                  <li>• Article statistics and engagement metrics</li>\n                </ul>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>AllBlogsView Features</CardTitle>\n              </CardHeader>\n              <CardContent>\n                <ul className=\"space-y-2 text-sm text-gray-600\">\n                  <li>• Responsive grid and list view modes</li>\n                  <li>• Advanced search and filtering</li>\n                  <li>• Category and tag-based filtering</li>\n                  <li>• Multiple sorting options</li>\n                  <li>• Infinite scroll pagination</li>\n                  <li>• Loading states and error handling</li>\n                  <li>• Mobile-responsive design</li>\n                </ul>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>BlogSidebar Features</CardTitle>\n              </CardHeader>\n              <CardContent>\n                <ul className=\"space-y-2 text-sm text-gray-600\">\n                  <li>• Table of contents with smooth scrolling</li>\n                  <li>• Active section highlighting</li>\n                  <li>• Recent and popular posts</li>\n                  <li>• Category navigation</li>\n                  <li>• Newsletter signup integration</li>\n                  <li>• Responsive sidebar behavior</li>\n                  <li>• Sticky positioning for better UX</li>\n                </ul>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>Comment System Features</CardTitle>\n              </CardHeader>\n              <CardContent>\n                <ul className=\"space-y-2 text-sm text-gray-600\">\n                  <li>• Nested comment replies support</li>\n                  <li>• Like/dislike functionality</li>\n                  <li>• Comment moderation and reporting</li>\n                  <li>• Real-time comment validation</li>\n                  <li>• User authentication integration</li>\n                  <li>• Responsive comment threading</li>\n                  <li>• Comment statistics and engagement</li>\n                </ul>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>Custom Hooks</CardTitle>\n              </CardHeader>\n              <CardContent>\n                <ul className=\"space-y-2 text-sm text-gray-600\">\n                  <li>• <strong>useBlog:</strong> Blog data management and filtering</li>\n                  <li>• <strong>useComments:</strong> Comment CRUD operations</li>\n                  <li>• <strong>useBlogNavigation:</strong> Table of contents and scrolling</li>\n                  <li>• Debounced search functionality</li>\n                  <li>• Pagination and infinite scroll support</li>\n                  <li>• Error handling and loading states</li>\n                  <li>• TypeScript support throughout</li>\n                </ul>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>Technical Features</CardTitle>\n              </CardHeader>\n              <CardContent>\n                <ul className=\"space-y-2 text-sm text-gray-600\">\n                  <li>• React 18+ with modern hooks patterns</li>\n                  <li>• Complete TypeScript support</li>\n                  <li>• Markdown rendering with react-markdown</li>\n                  <li>• Syntax highlighting for code blocks</li>\n                  <li>• SEO optimization with meta tags</li>\n                  <li>• Responsive design with mobile-first approach</li>\n                  <li>• Accessibility features (ARIA labels, keyboard nav)</li>\n                </ul>\n              </CardContent>\n            </Card>\n          </div>\n        </TabsContent>\n      </Tabs>\n    </div>\n  );\n};"],"names":["_jsxs","_jsx","Layout"],"mappings":";;;;;;;;;;;AAWO,MAAM,YAAY,GAAa,MAAK;IACzC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAA4B,UAAU,CAAC;IACrF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC;AAEvE,IAAA,MAAM,eAAe,GAAG,CAAC,IAAc,KAAI;QACzC,eAAe,CAAC,IAAI,CAAC;QACrB,cAAc,CAAC,YAAY,CAAC;QAC5B,SAAS,CAAC,IAAI,CAAC,CAAA,SAAA,EAAY,IAAI,CAAC,KAAK,CAAA,CAAE,CAAC;AAC1C,IAAA,CAAC;IAED,MAAM,eAAe,GAAG,MAAK;QAC3B,cAAc,CAAC,UAAU,CAAC;QAC1B,eAAe,CAAC,IAAI,CAAC;AACvB,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG;AACnB,QAAA,UAAU,EAAE,CAAA;;;;;;;;;AASd,CAAA,CAAA;AACE,QAAA,QAAQ,EAAE,CAAA;;;;;;;;AAQZ,CAAA,CAAA;AACE,QAAA,MAAM,EAAE,CAAA;;;;;;;;AAQV,CAAA,CAAA;AACE,QAAA,KAAK,EAAE,CAAA;;;;;;;;;;;AAWT,CAAA,CAAA;KACC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,aAExBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAChDA,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,aAAA,EAAA,CAAiB,EACjEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,+EAAA,EAAA,CAE7B,CAAA,EAAA,CACA,EACND,KAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,mBAAmB,aACpDC,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,aAAA,CAAA,EAAA,CAE9B,CAAA,EAAA,CACJ,EAGND,IAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,aAAa,EAAE,MAAK,EAAE,CAAC,EAAA,QAAA,EAAA,CACxCA,KAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACPA,IAAA,CAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAA,QAAA,EAAA,CACvBC,IAAC,GAAG,EAAA,EAAC,SAAS,EAAC,cAAc,GAAG,EAAA,WAAA,CAAA,EAAA,CAEpB,EACdD,IAAA,CAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAA,QAAA,EAAA,CACvBC,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,eAAA,CAAA,EAAA,CAErB,EACdD,IAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,UAAU,aAC3BC,GAAA,CAACC,UAAM,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,UAAA,CAAA,EAAA,CAEvB,CAAA,EAAA,CACL,EAEXD,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EACxCA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACHA,IAAC,WAAW,EAAA,EAAC,SAAS,EAAC,KAAK,EAAA,QAAA,EAC1BA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2DAA2D,EAAA,QAAA,EACxEA,GAAA,CAAC,UAAU,EAAA,EACT,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,YAAY,IAAI,SAAS,EACtC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAI;AACzB,4CAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;gDACrB,SAAS,CAAC,IAAI,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAC,KAAK,CAAA,CAAE,CAAC;4CAChD;AACF,wCAAA,CAAC,YAEA,WAAW,KAAK,UAAU,IACzBA,GAAA,CAAC,YAAY,EAAA,EAAC,WAAW,EAAE,eAAe,GAAI,KAE9CA,GAAA,CAAC,cAAc,IACb,MAAM,EAAE,YAAY,EAAE,EAAE,EACxB,WAAW,EAAE,eAAe,EAAA,CAC5B,CACH,GACU,EAAA,CACT,EAAA,CACM,GACT,EAAA,CACK,EAEdA,IAAC,WAAW,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EACxCA,aAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EACvB,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,MAC5CD,IAAA,CAAC,IAAI,eACHC,GAAA,CAAC,UAAU,cACTD,IAAA,CAAC,SAAS,IAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAAA,CAAE,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,EAAA,UAAA,CAAA,EAAA,CAAqB,GAC3E,EACbC,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kEAAkE,YAC/EA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,GAAQ,EAAA,CACf,EAAA,CACM,CAAA,EAAA,EARL,GAAG,CASP,CACR,CAAC,GACE,EAAA,CACM,EAEdA,IAAC,WAAW,EAAA,EAAC,KAAK,EAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAC5CD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,CAAoC,EAAA,CACnC,EACbA,GAAA,CAAC,WAAW,cACVD,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CC,6EAAsD,EACtDA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,6DAAA,EAAA,CAA+D,EAC/DA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,CAAkC,EAClCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,+BAAA,EAAA,CAAiC,EACjCA,oEAA6C,EAC7CA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,CAAwC,EACxCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,kDAAA,EAAA,CAAoD,CAAA,EAAA,CACjD,GACO,CAAA,EAAA,CACT,EAEPD,KAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAkC,EAAA,CACjC,EACbA,IAAC,WAAW,EAAA,EAAA,QAAA,EACVD,aAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CC,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,4CAAA,EAAA,CAA8C,EAC9CA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,CAAwC,EACxCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,yCAAA,EAAA,CAA2C,EAC3CA,0DAAmC,EACnCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,CAAqC,EACrCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,0CAAA,EAAA,CAA4C,EAC5CA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,CAAmC,CAAA,EAAA,CAChC,GACO,CAAA,EAAA,CACT,EAEPD,KAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,CAAiC,GAChC,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVD,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CC,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,gDAAA,EAAA,CAAkD,EAClDA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,CAAsC,EACtCA,0DAAmC,EACnCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,CAA8B,EAC9BA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,CAAwC,EACxCA,6DAAsC,EACtCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,yCAAA,EAAA,CAA2C,IACxC,EAAA,CACO,CAAA,EAAA,CACT,EAEPD,IAAA,CAAC,IAAI,eACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,CAAoC,EAAA,CACnC,EACbA,GAAA,CAAC,WAAW,cACVD,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CC,gEAAyC,EACzCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,CAAqC,EACrCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,yCAAA,EAAA,CAA2C,EAC3CA,8DAAuC,EACvCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,wCAAA,EAAA,CAA0C,EAC1CA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,qCAAA,EAAA,CAAuC,EACvCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,0CAAA,EAAA,CAA4C,CAAA,EAAA,CACzC,GACO,CAAA,EAAA,CACT,EAEPD,KAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,cAAA,EAAA,CAAyB,GACxB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVD,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CA,IAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,CAAA,SAAA,EAAMC,uCAAyB,EAAA,qCAAA,CAAA,EAAA,CAAwC,EACvED,mCAAMC,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,cAAA,EAAA,CAA6B,EAAA,0BAAA,CAAA,EAAA,CAA6B,EAChED,IAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,CAAA,SAAA,EAAMC,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAmC,wCAAqC,EAC9EA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,CAAyC,EACzCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,CAAiD,EACjDA,mEAA4C,EAC5CA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,CAAwC,CAAA,EAAA,CACrC,EAAA,CACO,IACT,EAEPD,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,CAA+B,EAAA,CAC9B,EACbA,GAAA,CAAC,WAAW,cACVD,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7CC,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,CAA+C,EAC/CA,6DAAsC,EACtCA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,CAAiD,EACjDA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,4CAAA,EAAA,CAA8C,EAC9CA,iEAA0C,EAC1CA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,CAAuD,EACvDA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,2DAAA,EAAA,CAA6D,CAAA,EAAA,CAC1D,GACO,CAAA,EAAA,CACT,CAAA,EAAA,CACH,GACM,CAAA,EAAA,CACT,CAAA,EAAA,CACH;AAEV;;;;"}

package/dist/components/Button/Button.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.example.js","sources":["../../../src/components/Button/Button.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Button } from \"./Button\";\r\n\r\nexport const ButtonExample: React.FC = () => (\r\n  <div className=\"space-y-4\">\r\n    <div className=\"flex flex-wrap gap-2\">\r\n      <Button variant=\"primary\">Primary</Button>\r\n      <Button variant=\"secondary\">Secondary</Button>\r\n      <Button variant=\"danger\">Danger</Button>\r\n      <Button variant=\"success\">Success</Button>\r\n      <Button variant=\"outline\">Outline</Button>\r\n      <Button variant=\"ghost\">Ghost</Button>\r\n    </div>\r\n    <div className=\"flex flex-wrap gap-2 items-center\">\r\n      <Button size=\"sm\">Small</Button>\r\n      <Button size=\"md\">Medium</Button>\r\n      <Button size=\"lg\">Large</Button>\r\n      <Button size=\"xl\">Extra Large</Button>\r\n    </div>\r\n  </div>\r\n);"],"names":["_jsxs","_jsx"],"mappings":";;;MAGa,aAAa,GAAa,OACrCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CACxBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAA,CACnCC,IAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,SAAA,EAAA,CAAiB,EAC1CA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,WAAW,0BAAmB,EAC9CA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAA,QAAA,EAAA,QAAA,EAAA,CAAgB,EACxCA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,SAAA,EAAA,CAAiB,EAC1CA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,wBAAiB,EAC1CA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,OAAO,EAAA,QAAA,EAAA,OAAA,EAAA,CAAe,CAAA,EAAA,CAClC,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDC,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,OAAA,EAAA,CAAe,EAChCA,IAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,CAAgB,EACjCA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,sBAAe,EAChCA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,aAAA,EAAA,CAAqB,CAAA,EAAA,CAClC,CAAA,EAAA,CACF;;;;"}
+{"version":3,"file":"Button.example.js","sources":["../../../src/components/Button/Button.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button } from \"./Button\";\n\nexport const ButtonExample: React.FC = () => (\n  <div className=\"space-y-4\">\n    <div className=\"flex flex-wrap gap-2\">\n      <Button variant=\"primary\">Primary</Button>\n      <Button variant=\"secondary\">Secondary</Button>\n      <Button variant=\"danger\">Danger</Button>\n      <Button variant=\"success\">Success</Button>\n      <Button variant=\"outline\">Outline</Button>\n      <Button variant=\"ghost\">Ghost</Button>\n    </div>\n    <div className=\"flex flex-wrap gap-2 items-center\">\n      <Button size=\"sm\">Small</Button>\n      <Button size=\"md\">Medium</Button>\n      <Button size=\"lg\">Large</Button>\n      <Button size=\"xl\">Extra Large</Button>\n    </div>\n  </div>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;MAGa,aAAa,GAAa,OACrCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CACxBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAA,CACnCC,IAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,SAAA,EAAA,CAAiB,EAC1CA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,WAAW,0BAAmB,EAC9CA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAA,QAAA,EAAA,QAAA,EAAA,CAAgB,EACxCA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAA,SAAA,EAAA,CAAiB,EAC1CA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,wBAAiB,EAC1CA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,OAAO,EAAA,QAAA,EAAA,OAAA,EAAA,CAAe,CAAA,EAAA,CAClC,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDC,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,OAAA,EAAA,CAAe,EAChCA,IAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,CAAgB,EACjCA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,sBAAe,EAChCA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,aAAA,EAAA,CAAqB,CAAA,EAAA,CAClC,CAAA,EAAA,CACF;;;;"}

package/dist/components/Card/Card.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.example.js","sources":["../../../src/components/Card/Card.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Card, CardHeader, CardTitle, CardContent } from \"./Card\";\r\n\r\nexport const CardExample: React.FC = () => (\r\n  <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <Card>\r\n      <CardHeader>\r\n        <CardTitle>Default Card</CardTitle>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <p className=\"text-gray-600\">This is a default card with standard styling.</p>\r\n      </CardContent>\r\n    </Card>\r\n    <Card variant=\"elevated\">\r\n      <CardHeader>\r\n        <CardTitle>Elevated Card</CardTitle>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <p className=\"text-gray-600\">This card has elevated shadow styling.</p>\r\n      </CardContent>\r\n    </Card>\r\n  </div>\r\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,WAAW,GAAa,OACnCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,cAAA,EAAA,CAAyB,EAAA,CACxB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,+CAAA,EAAA,CAAkD,EAAA,CAClE,CAAA,EAAA,CACT,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,QAAA,EAAA,CACtBC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,eAAA,EAAA,CAA0B,EAAA,CACzB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,wCAAA,EAAA,CAA2C,EAAA,CAC3D,CAAA,EAAA,CACT,CAAA,EAAA,CACH;;;;"}
+{"version":3,"file":"Card.example.js","sources":["../../../src/components/Card/Card.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"./Card\";\n\nexport const CardExample: React.FC = () => (\n  <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n    <Card>\n      <CardHeader>\n        <CardTitle>Default Card</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <p className=\"text-gray-600\">This is a default card with standard styling.</p>\n      </CardContent>\n    </Card>\n    <Card variant=\"elevated\">\n      <CardHeader>\n        <CardTitle>Elevated Card</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <p className=\"text-gray-600\">This card has elevated shadow styling.</p>\n      </CardContent>\n    </Card>\n  </div>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,WAAW,GAAa,OACnCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,cAAA,EAAA,CAAyB,EAAA,CACxB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,+CAAA,EAAA,CAAkD,EAAA,CAClE,CAAA,EAAA,CACT,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,QAAA,EAAA,CACtBC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,eAAA,EAAA,CAA0B,EAAA,CACzB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,wCAAA,EAAA,CAA2C,EAAA,CAC3D,CAAA,EAAA,CACT,CAAA,EAAA,CACH;;;;"}

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nconst cardVariants = cva(\r\n  // Mobile-first responsive, content-fitting, vertical stacking\r\n  \"w-full max-w-full flex flex-col rounded-lg border bg-white text-gray-950 shadow-sm\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"border-gray-200\",\r\n        elevated: \"border-gray-200 shadow-md\",\r\n        outlined: \"border-2 border-primary-200\",\r\n      },\r\n      padding: {\r\n        none: \"p-0\",\r\n        sm: \"p-2 sm:p-4\",\r\n        md: \"p-3 sm:p-6\",\r\n        lg: \"p-4 sm:p-8\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      padding: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nexport interface CardProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof cardVariants> {}\r\n\r\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\r\n  ({ className, variant, padding, ...props }, ref) => (\r\n    <div\r\n      ref={ref}\r\n      className={cn(cardVariants({ variant, padding, className }))}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nCard.displayName = \"Card\";\r\n\r\nconst CardHeader = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\"flex flex-col space-y-1.5 p-2 sm:p-4 md:p-6\", className)}\r\n    {...props}\r\n  />\r\n));\r\nCardHeader.displayName = \"CardHeader\";\r\n\r\nconst CardTitle = React.forwardRef<\r\n  HTMLParagraphElement,\r\n  React.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n  <h3\r\n    ref={ref}\r\n    className={cn(\r\n      \"text-2xl font-semibold leading-none tracking-tight\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nCardTitle.displayName = \"CardTitle\";\r\n\r\nconst CardDescription = React.forwardRef<\r\n  HTMLParagraphElement,\r\n  React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => (\r\n  <p\r\n    ref={ref}\r\n    className={cn(\"text-sm text-gray-500\", className)}\r\n    {...props}\r\n  />\r\n));\r\nCardDescription.displayName = \"CardDescription\";\r\n\r\nconst CardContent = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div ref={ref} className={cn(\"p-2 sm:p-4 md:p-6 pt-0\", className)} {...props} />\r\n));\r\nCardContent.displayName = \"CardContent\";\r\n\r\nconst CardFooter = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\"flex items-center p-2 sm:p-4 md:p-6 pt-0\", className)}\r\n    {...props}\r\n  />\r\n));\r\nCardFooter.displayName = \"CardFooter\";\r\n\r\nexport {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardDescription,\r\n  CardContent,\r\n  cardVariants,\r\n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG;AACtB;AACA,oFAAoF,EACpF;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,QAAQ,EAAE,2BAA2B;AACrC,YAAA,QAAQ,EAAE,6BAA6B;AACxC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AACjB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAOH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7CA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KACxD,KAAK,EAAA,CACT,CACH;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;AAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,SAAS,CAAC,EAAA,GACnE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,SAAS,CAAC,WAAW,GAAG,WAAW;AAEnC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAA,GAC7C,KAAK,EAAA,CACT,CACH;AACD,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI,CACjF;AACD,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,GAChE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst cardVariants = cva(\n  // Mobile-first responsive, content-fitting, vertical stacking\n  \"w-full max-w-full flex flex-col rounded-lg border bg-white text-gray-950 shadow-sm\",\n  {\n    variants: {\n      variant: {\n        default: \"border-gray-200\",\n        elevated: \"border-gray-200 shadow-md\",\n        outlined: \"border-2 border-primary-200\",\n      },\n      padding: {\n        none: \"p-0\",\n        sm: \"p-2 sm:p-4\",\n        md: \"p-3 sm:p-6\",\n        lg: \"p-4 sm:p-8\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      padding: \"md\",\n    },\n  }\n);\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, padding, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ variant, padding, className }))}\n      {...props}\n    />\n  )\n);\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-2 sm:p-4 md:p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-gray-500\", className)}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-2 sm:p-4 md:p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-2 sm:p-4 md:p-6 pt-0\", className)}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  cardVariants,\n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG;AACtB;AACA,oFAAoF,EACpF;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,QAAQ,EAAE,2BAA2B;AACrC,YAAA,QAAQ,EAAE,6BAA6B;AACxC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AACjB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAOH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7CA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KACxD,KAAK,EAAA,CACT,CACH;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;AAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,SAAS,CAAC,EAAA,GACnE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,SAAS,CAAC,WAAW,GAAG,WAAW;AAEnC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAA,GAC7C,KAAK,EAAA,CACT,CACH;AACD,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI,CACjF;AACD,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,GAChE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/Checkbox/Checkbox.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.example.js","sources":["../../../src/components/Checkbox/Checkbox.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Checkbox } from \"./Checkbox\";\r\n\r\nexport const CheckboxExample: React.FC = () => (\r\n  <div className=\"space-y-2\">\r\n    <label className=\"flex items-center gap-2\">\r\n      <Checkbox /> <span>Default</span>\r\n    </label>\r\n    <label className=\"flex items-center gap-2\">\r\n      <Checkbox checked /> <span>Checked</span>\r\n    </label>\r\n    <label className=\"flex items-center gap-2\">\r\n      <Checkbox disabled /> <span>Disabled</span>\r\n    </label>\r\n    <label className=\"flex items-center gap-2\">\r\n      <Checkbox size=\"sm\" /> <span>Small</span>\r\n    </label>\r\n    <label className=\"flex items-center gap-2\">\r\n      <Checkbox size=\"lg\" /> <span>Large</span>\r\n    </label>\r\n  </div>\r\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,eAAe,GAAa,OACvCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CACxBA,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,yBAAyB,aACxCC,GAAA,CAAC,QAAQ,EAAA,EAAA,CAAG,EAAA,GAAA,EAACA,oCAAoB,CAAA,EAAA,CAC3B,EACRD,gBAAO,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACxCC,GAAA,CAAC,QAAQ,EAAA,EAAC,OAAO,SAAG,EAAA,GAAA,EAACA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAoB,IACnC,EACRD,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACxCC,GAAA,CAAC,QAAQ,EAAA,EAAC,QAAQ,SAAG,EAAA,GAAA,EAACA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,CAAqB,IACrC,EACRD,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACxCC,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,CAAG,EAAA,GAAA,EAACA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAkB,IACnC,EACRD,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,yBAAyB,aACxCC,GAAA,CAAC,QAAQ,IAAC,IAAI,EAAC,IAAI,EAAA,CAAG,EAAA,GAAA,EAACA,kCAAkB,CAAA,EAAA,CACnC,CAAA,EAAA,CACJ;;;;"}
+{"version":3,"file":"Checkbox.example.js","sources":["../../../src/components/Checkbox/Checkbox.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Checkbox } from \"./Checkbox\";\n\nexport const CheckboxExample: React.FC = () => (\n  <div className=\"space-y-2\">\n    <label className=\"flex items-center gap-2\">\n      <Checkbox /> <span>Default</span>\n    </label>\n    <label className=\"flex items-center gap-2\">\n      <Checkbox checked /> <span>Checked</span>\n    </label>\n    <label className=\"flex items-center gap-2\">\n      <Checkbox disabled /> <span>Disabled</span>\n    </label>\n    <label className=\"flex items-center gap-2\">\n      <Checkbox size=\"sm\" /> <span>Small</span>\n    </label>\n    <label className=\"flex items-center gap-2\">\n      <Checkbox size=\"lg\" /> <span>Large</span>\n    </label>\n  </div>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,eAAe,GAAa,OACvCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CACxBA,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,yBAAyB,aACxCC,GAAA,CAAC,QAAQ,EAAA,EAAA,CAAG,EAAA,GAAA,EAACA,oCAAoB,CAAA,EAAA,CAC3B,EACRD,gBAAO,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACxCC,GAAA,CAAC,QAAQ,EAAA,EAAC,OAAO,SAAG,EAAA,GAAA,EAACA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAoB,IACnC,EACRD,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACxCC,GAAA,CAAC,QAAQ,EAAA,EAAC,QAAQ,SAAG,EAAA,GAAA,EAACA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,CAAqB,IACrC,EACRD,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACxCC,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,CAAG,EAAA,GAAA,EAACA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAkB,IACnC,EACRD,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,yBAAyB,aACxCC,GAAA,CAAC,QAAQ,IAAC,IAAI,EAAC,IAAI,EAAA,CAAG,EAAA,GAAA,EAACA,kCAAkB,CAAA,EAAA,CACnC,CAAA,EAAA,CACJ;;;;"}

package/dist/components/CodeHighlight/CodeHighlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlight.js","sources":["../../../src/components/CodeHighlight/CodeHighlight.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\r\nimport { vscDarkPlus } from \"react-syntax-highlighter/dist/esm/styles/prism\";\r\n\r\nexport interface CodeHighlightProps {\r\n  code: string;\r\n  language?: string;\r\n  className?: string;\r\n}\r\n\r\nexport const CodeHighlight: React.FC<CodeHighlightProps> = ({\r\n  code,\r\n  language = \"javascript\",\r\n  className = \"\",\r\n}) => {\r\n  return (\r\n    <SyntaxHighlighter\r\n      language={language}\r\n      style={vscDarkPlus}\r\n      customStyle={{\r\n        borderRadius: \"0.5rem\",\r\n        padding: \"1rem\",\r\n        fontFamily: \"monospace\",\r\n        background: \"var(--color-primary-50, #2d2d2d)\",\r\n        color: \"var(--color-primary-700, #f8f8f2)\",\r\n        overflowX: \"auto\",\r\n      }}\r\n      className={className}\r\n      showLineNumbers={false}\r\n      wrapLongLines={true}\r\n    >\r\n      {code}\r\n    </SyntaxHighlighter>\r\n  );\r\n};\r\n\r\nCodeHighlight.displayName = \"CodeHighlight\";"],"names":["_jsx","SyntaxHighlighter"],"mappings":";;;;AAUO,MAAM,aAAa,GAAiC,CAAC,EAC1D,IAAI,EACJ,QAAQ,GAAG,YAAY,EACvB,SAAS,GAAG,EAAE,GACf,KAAI;AACH,IAAA,QACEA,GAAA,CAACC,KAAiB,EAAA,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE;AACX,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,WAAW;AACvB,YAAA,UAAU,EAAE,kCAAkC;AAC9C,YAAA,KAAK,EAAE,mCAAmC;AAC1C,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,IAAI,EAAA,QAAA,EAElB,IAAI,EAAA,CACa;AAExB;AAEA,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"CodeHighlight.js","sources":["../../../src/components/CodeHighlight/CodeHighlight.tsx"],"sourcesContent":["import React from \"react\";\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\nimport { vscDarkPlus } from \"react-syntax-highlighter/dist/esm/styles/prism\";\n\nexport interface CodeHighlightProps {\n  code: string;\n  language?: string;\n  className?: string;\n}\n\nexport const CodeHighlight: React.FC<CodeHighlightProps> = ({\n  code,\n  language = \"javascript\",\n  className = \"\",\n}) => {\n  return (\n    <SyntaxHighlighter\n      language={language}\n      style={vscDarkPlus}\n      customStyle={{\n        borderRadius: \"0.5rem\",\n        padding: \"1rem\",\n        fontFamily: \"monospace\",\n        background: \"var(--color-primary-50, #2d2d2d)\",\n        color: \"var(--color-primary-700, #f8f8f2)\",\n        overflowX: \"auto\",\n      }}\n      className={className}\n      showLineNumbers={false}\n      wrapLongLines={true}\n    >\n      {code}\n    </SyntaxHighlighter>\n  );\n};\n\nCodeHighlight.displayName = \"CodeHighlight\";"],"names":["_jsx","SyntaxHighlighter"],"mappings":";;;;AAUO,MAAM,aAAa,GAAiC,CAAC,EAC1D,IAAI,EACJ,QAAQ,GAAG,YAAY,EACvB,SAAS,GAAG,EAAE,GACf,KAAI;AACH,IAAA,QACEA,GAAA,CAACC,KAAiB,EAAA,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE;AACX,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,WAAW;AACvB,YAAA,UAAU,EAAE,kCAAkC;AAC9C,YAAA,KAAK,EAAE,mCAAmC;AAC1C,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,IAAI,EAAA,QAAA,EAElB,IAAI,EAAA,CACa;AAExB;AAEA,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/dist/components/ComponentShowcase/ComponentShowcase.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useState } from 'react';
+import { useState, useRef, useMemo, useEffect } from 'react';
 import { Layout, Shield, AlertCircle, BarChart3, MousePointer, Palette, ChevronRight, Search, ChevronDown, Monitor, Tablet, Smartphone, Sun, Moon, Eye, Code, Settings, Check, Copy, Book } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../Button/Button.js';
@@ -66,23 +66,60 @@ const componentCategories = {
 };
 const ComponentShowcase = ({ className }) => {
     const [selectedComponent, setSelectedComponent] = useState("button");
+    const [activeTab, setActiveTab] = useState("preview");
     const [searchQuery, setSearchQuery] = useState("");
     const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
     const [expandedCategories, setExpandedCategories] = useState(["Forms"]);
     const [viewMode, setViewMode] = useState("desktop");
     const [darkMode, setDarkMode] = useState(false);
     const [copiedCode, setCopiedCode] = useState(null);
+    const sidebarRef = useRef(null);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
     const toggleCategory = (category) => {
         setExpandedCategories((prev) => prev.includes(category)
             ? prev.filter((c) => c !== category)
             : [...prev, category]);
     };
+    const flatComponents = useMemo(() => {
+        return Object.values(componentCategories).flatMap((category) => category.components.map((component) => component.id));
+    }, []);
+    useEffect(() => {
+        if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {
+            const buttons = sidebarRef.current.querySelectorAll('[data-component-id]');
+            const target = buttons[focusedIndex];
+            if (target) {
+                target.focus();
+            }
+        }
+    }, [focusedIndex, sidebarCollapsed]);
+    const handleKeyNavigation = (event) => {
+        if (sidebarCollapsed)
+            return;
+        const currentIndex = flatComponents.indexOf(selectedComponent);
+        if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;
+            setFocusedIndex(nextIndex);
+            setSelectedComponent(flatComponents[nextIndex]);
+        }
+        else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;
+            setFocusedIndex(prevIndex);
+            setSelectedComponent(flatComponents[prevIndex]);
+        }
+    };
     const copyToClipboard = async (code) => {
         try {
-            await navigator.clipboard.writeText(code);
-            setCopiedCode(code);
-            showToast.success("Code copied to clipboard!");
-            setTimeout(() => setCopiedCode(null), 2000);
+            if (navigator?.clipboard?.writeText) {
+                await navigator.clipboard.writeText(code);
+                setCopiedCode(code);
+                showToast.success("Code copied to clipboard!");
+                setTimeout(() => setCopiedCode(null), 2000);
+            }
+            else {
+                throw new Error("Clipboard API unavailable");
+            }
         }
         catch (err) {
             showToast.error("Failed to copy code");
@@ -99,6 +136,8 @@ const ComponentShowcase = ({ className }) => {
         return acc;
     }, {});
     const currentDoc = componentDocs[selectedComponent];
+    const currentExample = currentDoc?.example ?? '';
+    const currentProps = (currentDoc?.props ?? []);
     const getViewportClass = () => {
         switch (viewMode) {
             case "tablet":
@@ -109,11 +148,17 @@ const ComponentShowcase = ({ className }) => {
                 return "w-full";
         }
     };
-    return (jsxs("div", { className: cn("flex h-screen bg-gray-50", className), children: [jsx(Toast, {}), jsxs("div", { className: cn("bg-white border-r border-gray-200 transition-all duration-300 flex flex-col", sidebarCollapsed ? "w-16" : "w-80"), children: [jsxs("div", { className: "p-4 border-b border-gray-200", children: [!sidebarCollapsed && (jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsx("span", { className: "font-bold text-lg text-gray-900", children: "Beyond UI" })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsx(ChevronRight, { className: "h-4 w-4" }) })] })), sidebarCollapsed && (jsx("div", { className: "flex justify-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) })), !sidebarCollapsed && (jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] }))] }), jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxs("div", { className: "mb-4", children: [jsxs("button", { onClick: () => !sidebarCollapsed && toggleCategory(categoryName), className: cn("flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors", "hover:bg-gray-100 text-gray-700", sidebarCollapsed ? "justify-center" : "justify-between"), children: [jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, !sidebarCollapsed && jsx("span", { children: categoryName })] }), !sidebarCollapsed && (jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180") }))] }), !sidebarCollapsed && expandedCategories.includes(categoryName) && (jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => (jsx("button", { onClick: () => setSelectedComponent(component.id), className: cn("flex items-center w-full p-2 text-sm rounded-lg transition-colors", selectedComponent === component.id
-                                            ? "bg-primary-50 text-primary-700 border-r-2 border-primary-600"
-                                            : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"), children: component.name }, component.id))) }))] }, categoryName))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white border-b border-gray-200 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: currentDoc?.name || "Component Showcase" }), currentDoc && jsx(Badge, { variant: "outline", children: currentDoc.name })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDarkMode(!darkMode), children: darkMode ? (jsx(Sun, { className: "h-4 w-4" })) : (jsx(Moon, { className: "h-4 w-4" })) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? (jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsx("div", { children: jsx("p", { className: "text-lg text-gray-600", children: currentDoc.description }) }), jsxs("div", { children: [jsxs("div", { className: "flex gap-3 mb-4", children: [jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedComponent("button"), children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedComponent("button"), children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedComponent("button"), children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsxs("div", { children: [jsx("div", { className: "mt-6", children: jsx("div", { className: "bg-white rounded-lg shadow p-6", children: jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsx("div", { className: cn(darkMode && "dark"), children: showcaseRegistry[selectedComponent]
+    return (jsxs("div", { className: cn("flex h-screen bg-gray-50", className), children: [jsx(Toast, {}), jsxs("div", { ref: sidebarRef, className: cn("bg-white border-r border-gray-200 transition-all duration-300 flex flex-col", sidebarCollapsed ? "w-16" : "w-80"), tabIndex: sidebarCollapsed ? -1 : 0, onKeyDown: handleKeyNavigation, "aria-label": "Component navigation", children: [jsxs("div", { className: "p-4 border-b border-gray-200", children: [!sidebarCollapsed && (jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsx("span", { className: "font-bold text-lg text-gray-900", children: "Beyond UI" })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsx(ChevronRight, { className: "h-4 w-4" }) })] })), sidebarCollapsed && (jsx("div", { className: "flex justify-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) })), !sidebarCollapsed && (jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] }))] }), jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxs("div", { className: "mb-4", children: [jsxs("button", { onClick: () => !sidebarCollapsed && toggleCategory(categoryName), className: cn("flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors", "hover:bg-gray-100 text-gray-700", sidebarCollapsed ? "justify-center" : "justify-between"), children: [jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, !sidebarCollapsed && jsx("span", { children: categoryName })] }), !sidebarCollapsed && (jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180") }))] }), !sidebarCollapsed && expandedCategories.includes(categoryName) && (jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => {
+                                        const isActive = selectedComponent === component.id;
+                                        return (jsx("button", { "data-component-id": component.id, onClick: () => {
+                                                setSelectedComponent(component.id);
+                                                setFocusedIndex(flatComponents.indexOf(component.id));
+                                            }, className: cn("flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", isActive
+                                                ? "bg-primary-50 text-primary-700 border-r-2 border-primary-600"
+                                                : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"), "aria-current": isActive ? "page" : undefined, children: component.name }, component.id));
+                                    }) }))] }, categoryName))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white border-b border-gray-200 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: currentDoc?.name || "Component Showcase" }), currentDoc && jsx(Badge, { variant: "outline", children: currentDoc.name })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDarkMode(!darkMode), children: darkMode ? (jsx(Sun, { className: "h-4 w-4" })) : (jsx(Moon, { className: "h-4 w-4" })) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? (jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsx("div", { children: jsx("p", { className: "text-lg text-gray-600", children: currentDoc.description }) }), jsxs("div", { children: [jsxs("div", { className: "flex gap-3 mb-4", role: "tablist", "aria-label": "Component details tabs", children: [jsxs(Button, { variant: activeTab === "preview" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("preview"), role: "tab", "aria-selected": activeTab === "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(Button, { variant: activeTab === "code" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("code"), role: "tab", "aria-selected": activeTab === "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxs(Button, { variant: activeTab === "props" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("props"), role: "tab", "aria-selected": activeTab === "props", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsxs("div", { children: [jsx("div", { className: "mt-6", children: jsx("div", { className: "bg-white rounded-lg shadow p-6", children: jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsx("div", { className: cn(darkMode && "dark"), children: showcaseRegistry[selectedComponent]
                                                                     ? React.createElement(showcaseRegistry[selectedComponent])
-                                                                    : null }) }) }) }), jsx("div", { className: "mt-6", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("h2", { className: "text-lg font-semibold mb-0", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentDoc.example), children: [copiedCode === currentDoc.example ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsx("code", { children: currentDoc.example }) })] }) }), jsx("div", { className: "mt-6", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsx("h2", { className: "text-lg font-semibold mb-4", children: "Component Props" }), jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-gray-200", children: [jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Prop" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Type" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Default" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Description" })] }) }), jsx("tbody", { children: currentDoc.props?.map((prop, index) => (jsxs("tr", { className: "border-b border-gray-100", children: [jsxs("td", { className: "p-3", children: [jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.name }), "required" in prop && prop.required && (jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsx("td", { className: "p-3 text-gray-600", children: prop.type }), jsx("td", { className: "p-3 text-gray-600", children: "default" in prop && prop.default ? (jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.default })) : null }), jsx("td", { className: "p-3 text-gray-600", children: prop.description })] }, index))) })] }) })] }) })] })] })] })) : (jsx("div", { className: "flex items-center justify-center h-full", children: jsxs("div", { className: "text-center", children: [jsx(Book, { className: "h-16 w-16 text-gray-400 mx-auto mb-4" }), jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select a Component" }), jsx("p", { className: "text-gray-600", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
+                                                                    : null }) }) }) }), activeTab === "code" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Code example", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("h2", { className: "text-lg font-semibold mb-0", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentExample), children: [copiedCode === currentExample ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsx("code", { children: currentExample }) })] }) })), activeTab === "props" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Component props", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsx("h2", { className: "text-lg font-semibold mb-4", children: "Component Props" }), jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-gray-200", children: [jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Prop" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Type" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Default" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Description" })] }) }), jsx("tbody", { children: currentProps.length > 0 ? (currentProps.map((prop, index) => (jsxs("tr", { className: "border-b border-gray-100", children: [jsxs("td", { className: "p-3", children: [jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.name }), prop.required && (jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsx("td", { className: "p-3 text-gray-600", children: prop.type }), jsx("td", { className: "p-3 text-gray-600", children: prop.default ? (jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.default })) : null }), jsx("td", { className: "p-3 text-gray-600", children: prop.description })] }, prop.name ?? index)))) : (jsx("tr", { children: jsx("td", { colSpan: 4, className: "p-4 text-center text-gray-500", children: "No props documented for this component yet." }) })) })] }) })] }) }))] })] })] })) : (jsx("div", { className: "flex items-center justify-center h-full", children: jsxs("div", { className: "text-center", children: [jsx(Book, { className: "h-16 w-16 text-gray-400 mx-auto mb-4" }), jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select a Component" }), jsx("p", { className: "text-gray-600", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
 };
 
 export { ComponentShowcase };