@inspirare/design-system 0.0.23 → 0.0.24

package/src/demo/OverlaysDemo.tsx

@@ -5,22 +5,20 @@ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTr
 import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "../components/ui/hover-card";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "../components/ui/alert-dialog";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuGroup } from "../components/ui/dropdown-menu";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../components/ui/command";
 import { Button } from "../components/ui/button";
 
 export function OverlaysDemo() {
   return (
-    <div className="space-y-8">
+    <div className="flex flex-col gap-8">
       <Card>
         <CardHeader>
           <CardTitle>Modais (Dialog, Alert Dialog, Sheet, Drawer)</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-wrap gap-4">
           <Dialog>
-            <DialogTrigger asChild>
-              <Button variant="outline">Abrir Dialog</Button>
-            </DialogTrigger>
+            <DialogTrigger render={<Button variant="outline" />}>Abrir Dialog</DialogTrigger>
             <DialogContent className="sm:max-w-[425px]">
               <DialogHeader>
                 <DialogTitle>Editar perfil</DialogTitle>
@@ -38,9 +36,7 @@ export function OverlaysDemo() {
           </Dialog>
 
           <AlertDialog>
-            <AlertDialogTrigger asChild>
-              <Button variant="destructive">Abrir Alert Dialog</Button>
-            </AlertDialogTrigger>
+            <AlertDialogTrigger render={<Button variant="destructive" />}>Abrir Alert Dialog</AlertDialogTrigger>
             <AlertDialogContent>
               <AlertDialogHeader>
                 <AlertDialogTitle>Você tem certeza absoluta?</AlertDialogTitle>
@@ -56,9 +52,7 @@ export function OverlaysDemo() {
           </AlertDialog>
 
           <Sheet>
-            <SheetTrigger asChild>
-              <Button variant="outline">Abrir Sheet (Painel)</Button>
-            </SheetTrigger>
+            <SheetTrigger render={<Button variant="outline" />}>Abrir Sheet (Painel)</SheetTrigger>
             <SheetContent>
               <SheetHeader>
                 <SheetTitle>Tem certeza que deseja continuar?</SheetTitle>
@@ -70,9 +64,7 @@ export function OverlaysDemo() {
           </Sheet>
 
           <Drawer>
-            <DrawerTrigger asChild>
-              <Button variant="outline">Abrir Drawer (Gaveta)</Button>
-            </DrawerTrigger>
+            <DrawerTrigger render={<Button variant="outline" />}>Abrir Drawer (Gaveta)</DrawerTrigger>
             <DrawerContent>
               <div className="mx-auto w-full max-w-sm">
                 <DrawerHeader>
@@ -80,15 +72,13 @@ export function OverlaysDemo() {
                   <DrawerDescription>Defina sua meta de atividade diária.</DrawerDescription>
                 </DrawerHeader>
                 <div className="p-4 pb-0">
-                  <div className="flex items-center justify-center space-x-2">
+                  <div className="flex items-center justify-center gap-2">
                     <p>Conteúdo da gaveta</p>
                   </div>
                 </div>
                 <DrawerFooter>
                   <Button>Salvar</Button>
-                  <DrawerClose asChild>
-                    <Button variant="outline">Cancelar</Button>
-                  </DrawerClose>
+                  <DrawerClose render={<Button variant="outline" />}>Cancelar</DrawerClose>
                 </DrawerFooter>
               </div>
             </DrawerContent>
@@ -102,26 +92,24 @@ export function OverlaysDemo() {
         </CardHeader>
         <CardContent className="flex flex-wrap gap-4">
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline">Menu (Dropdown)</Button>
-            </DropdownMenuTrigger>
+            <DropdownMenuTrigger render={<Button variant="outline" />}>Menu (Dropdown)</DropdownMenuTrigger>
             <DropdownMenuContent>
-              <DropdownMenuLabel>Minha Conta</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Perfil</DropdownMenuItem>
-              <DropdownMenuItem>Faturamento</DropdownMenuItem>
-              <DropdownMenuItem>Equipe</DropdownMenuItem>
-              <DropdownMenuItem>Assinatura</DropdownMenuItem>
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>Minha Conta</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Perfil</DropdownMenuItem>
+                <DropdownMenuItem>Faturamento</DropdownMenuItem>
+                <DropdownMenuItem>Equipe</DropdownMenuItem>
+                <DropdownMenuItem>Assinatura</DropdownMenuItem>
+              </DropdownMenuGroup>
             </DropdownMenuContent>
           </DropdownMenu>
 
           <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline">Abrir Popover</Button>
-            </PopoverTrigger>
+            <PopoverTrigger render={<Button variant="outline" />}>Abrir Popover</PopoverTrigger>
             <PopoverContent className="w-80">
               <div className="grid gap-4">
-                <div className="space-y-2">
+                <div className="flex flex-col gap-2">
                   <h4 className="font-medium leading-none">Dimensões</h4>
                   <p className="text-sm text-muted-foreground">
                     Defina as dimensões para a camada.
@@ -132,12 +120,10 @@ export function OverlaysDemo() {
           </Popover>
 
           <HoverCard>
-            <HoverCardTrigger asChild>
-              <Button variant="link">@nextjs</Button>
-            </HoverCardTrigger>
+            <HoverCardTrigger render={<Button variant="link" />}>@nextjs</HoverCardTrigger>
             <HoverCardContent className="w-80">
-              <div className="flex justify-between space-x-4">
-                <div className="space-y-1">
+              <div className="flex justify-between gap-4">
+                <div className="flex flex-col gap-1">
                   <h4 className="text-sm font-semibold">@nextjs</h4>
                   <p className="text-sm">
                     The React Framework – created and maintained by @vercel.

package/src/demo/update-demos.js

@@ -0,0 +1,82 @@
+import fs from 'fs';
+import path from 'path';
+
+const demoDir = 'c:\\\\Users\\\\chris\\\\Desktop\\\\inspirare-design-system\\\\src\\\\demo';
+
+// 1. Add Carousel to Navigation & Layout
+const navPath = path.join(demoDir, 'NavigationDemo.tsx');
+let navContent = fs.readFileSync(navPath, 'utf8');
+if (!navContent.includes('Carousel')) {
+  navContent = navContent.replace(
+    'import { Accordion',
+    'import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../components/ui/carousel";\nimport { Accordion'
+  );
+  
+  const carouselDemo = `
+      <Card>
+        <CardHeader>
+          <CardTitle>Carousel</CardTitle>
+          <CardDescription>Carrossel de conteúdo.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex justify-center">
+          <Carousel className="w-full max-w-xs">
+            <CarouselContent>
+              {Array.from({ length: 5 }).map((_, index) => (
+                <CarouselItem key={index}>
+                  <div className="p-1">
+                    <Card>
+                      <CardContent className="flex aspect-square items-center justify-center p-6">
+                        <span className="text-4xl font-semibold">{index + 1}</span>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
+        </CardContent>
+      </Card>
+`;
+  navContent = navContent.replace('</div>\n  );\n}', carouselDemo + '    </div>\n  );\n}');
+  fs.writeFileSync(navPath, navContent);
+}
+
+// 2. Add InputOTP to FormsDemo
+const formsPath = path.join(demoDir, 'FormsDemo.tsx');
+let formsContent = fs.readFileSync(formsPath, 'utf8');
+if (!formsContent.includes('InputOTP')) {
+  formsContent = formsContent.replace(
+    'import { Input }',
+    'import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "../components/ui/input-otp";\nimport { Input }'
+  );
+  
+  const otpDemo = `
+      <Card>
+        <CardHeader>
+          <CardTitle>One-Time Password (OTP)</CardTitle>
+          <CardDescription>Para códigos de verificação.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <InputOTP maxLength={6}>
+            <InputOTPGroup>
+              <InputOTPSlot index={0} />
+              <InputOTPSlot index={1} />
+              <InputOTPSlot index={2} />
+            </InputOTPGroup>
+            <InputOTPSeparator />
+            <InputOTPGroup>
+              <InputOTPSlot index={3} />
+              <InputOTPSlot index={4} />
+              <InputOTPSlot index={5} />
+            </InputOTPGroup>
+          </InputOTP>
+        </CardContent>
+      </Card>
+`;
+  formsContent = formsContent.replace('</div>\n  );\n}', otpDemo + '    </div>\n  );\n}');
+  fs.writeFileSync(formsPath, formsContent);
+}
+
+console.log('Added missing components to demo pages!');

package/src/index.css

@@ -1,4 +1,6 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 @custom-variant dark (&:is(.dark *));
 
 /* Detecção de conteúdo restrita à BIBLIOTECA. O playground do Vite
@@ -25,27 +27,28 @@ html {
   --icon-xs: 1rem;    /* 16px — ícones inline em texto pequeno, badges */
   --icon-sm: 1.5rem;  /* 24px — padrão em botões e itens de lista */
   --icon-md: 2rem;    /* 32px — destaque em cards, headers de seção */
-  --icon-lg: 2.5rem;  /* 40px — ícones hero/empty state */
-
+  --icon-lg: 2.5rem;  
   --background: #F9F5F2;
-  --foreground: #1e1815;
-  --card: #FDF7F1;
-  --card-foreground: #1e1815;
-  --popover: #FDF7F1;
-  --popover-foreground: #1e1815;
-  --primary: #dc663e;
-  --primary-foreground: #fceed7;
-  --secondary: #e3ac8e;
-  --secondary-foreground: #2c2c2c;
-  --muted: #F2EBE2;
-  --muted-foreground: #7a6e64;
-  --accent: #F2EBE2;
-  --accent-foreground: #1e1815;
-  --destructive: #ef4444;
-  --destructive-foreground: #ffffff;
-  --border: #E5DDD6;
-  --input: #E5DDD6;
-  --ring: #dc663e;
+  --foreground: #2C2C2C;
+  --card: #FAF6F1;
+  --card-foreground: #2C2C2C;
+  --popover: #FAF6F1;
+  --popover-foreground: #2C2C2C;
+  --primary: #FF9876;
+  --primary-foreground: #2C2C2C;
+  --secondary: #E3AC8E;
+  --secondary-foreground: #2C2C2C;
+  --muted: #EADDCB;
+  --muted-foreground: #7A6E64;
+  --accent: #E3AC8E;
+  --accent-foreground: #2C2C2C;
+  --destructive: #DC663E;
+  --destructive-foreground: #FCEED7;
+  --border: #EADDCB;
+  --input: #EADDCB;
+  --ring: #FF9876;
+  --radius: 1rem;
+
   --chart-1: #dc663e;
   --chart-2: #e3ac8e;
   --chart-3: #fceed7;
@@ -63,6 +66,10 @@ html {
   --font-serif: Special Elite, ui-serif, serif;
   --font-mono: Fira Code;
   --radius: 0.5rem;
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --font-heading: var(--font-sans);
   /* 8px */
   --shadow-2xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.01);
   --shadow-xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.01);
@@ -100,26 +107,27 @@ html {
 }
 
 .dark {
-  --background: #2a2a2a;
-  --foreground: #fceed7;
+  --background: #2C2C2C;
+  --foreground: #FCEED7;
   --card: #353535;
-  --card-foreground: #fceed7;
-  --popover: #303030;
-  --popover-foreground: #fceed7;
-  --primary: #dc663e;
-  --primary-dark: #ff7512;
-  --primary-foreground: #fceed7;
-  --secondary: #fceed7;
-  --secondary-foreground: #2a2a2a;
+  --card-foreground: #FCEED7;
+  --popover: #2C2C2C;
+  --popover-foreground: #FCEED7;
+  --primary: #DC663E;
+  --primary-foreground: #FCEED7;
+  --secondary: #E3AC8E;
+  --secondary-foreground: #2C2C2C;
   --muted: #404040;
-  --muted-foreground: #b8b8b8;
-  --accent: #fceed7;
-  --accent-foreground: #2a2a2a;
-  --destructive: #ef4444;
-  --destructive-foreground: #fceed7;
+  --muted-foreground: #B3A897;
+  --accent: #404040;
+  --accent-foreground: #FCEED7;
+  --destructive: #FF9876;
+  --destructive-foreground: #2C2C2C;
   --border: #454545;
   --input: #404040;
-  --ring: #dc663e;
+  --ring: #DC663E;
+  --radius: 0.75rem;
+
   --chart-1: #dc663e;
   --chart-2: #fceed7;
   --chart-3: #e3ac8e;
@@ -247,6 +255,21 @@ html {
     @apply bg-background text-foreground;
   }
 
+  button,
+  [role="button"],
+  a[href],
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"] {
+    cursor: pointer;
+  }
+
+  button:disabled,
+  [role="button"][aria-disabled="true"],
+  input:disabled {
+    cursor: not-allowed;
+  }
+
   /* Fix for Radix Popper z-index auto issues in MFE / Host environments */
   [data-radix-popper-content-wrapper] {
     z-index: 99999 !important;
@@ -665,16 +688,13 @@ body {
   --font-mono: var(--font-mono);
 
   /* Inspirare Brand Colors */
-  --color-Inspirare-purple-50: oklch(0.95 0.05 270);
-  --color-Inspirare-purple-100: oklch(0.9 0.1 270);
-  --color-Inspirare-purple-200: oklch(0.85 0.15 270);
-  --color-Inspirare-purple-300: oklch(0.8 0.18 270);
-  --color-Inspirare-purple-400: oklch(0.7 0.2 270);
-  --color-Inspirare-purple-500: oklch(0.6 0.2 270);
-  --color-Inspirare-purple-600: oklch(0.55 0.22 270);
-  --color-Inspirare-purple-700: oklch(0.5 0.24 270);
-  --color-Inspirare-purple-800: oklch(0.4 0.26 270);
-  --color-Inspirare-purple-900: oklch(0.3 0.28 270);
+  --color-inspirare-dark: #2C2C2C;
+  --color-inspirare-cream: #FCEED7;
+  --color-inspirare-gray: #F4F4F5;
+  --color-inspirare-peach: #E3AC8E;
+  --color-inspirare-orange-light: #FF9876;
+  --color-inspirare-orange: #DC663E;
+  --color-inspirare-orange-vivid: #FF7512;
 
   --color-Inspirare-blue-50: oklch(0.95 0.05 200);
   --color-Inspirare-blue-100: oklch(0.9 0.08 200);

package/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }

package/src/stories/Button.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/arg-types
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,36 @@
+
+import './button.css';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};