vinta-schedule-design-system 0.1.0

package/src/ui/tabs.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/ui/textarea.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { Textarea } from './textarea';
+import { Label } from './label';
+
+const meta = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  // Leaf form control — self-closing, so NO slot. Real
+  // `React.ComponentProps<'textarea'>` members only (§6: no className/style).
+  argTypes: {
+    placeholder: { control: 'text' },
+    rows: { control: 'number', description: 'Visible number of text lines' },
+    defaultValue: {
+      control: 'text',
+      description: 'Initial (uncontrolled) value',
+    },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    readOnly: { control: 'boolean' },
+  },
+  args: { placeholder: 'Notes for the visit…', rows: 3 },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <Textarea className='w-80' {...args} />,
+};
+
+export const WithLabel: Story = {
+  render: (args) => (
+    <div className='grid w-80 gap-2'>
+      <Label htmlFor='notes'>Appointment notes</Label>
+      <Textarea id='notes' {...args} />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => <Textarea className='w-80' {...args} />,
+};

package/src/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<'textarea'>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-sm focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src/ui/tooltip.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './tooltip';
+import { Button } from './button';
+
+const meta = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  // Radix TooltipProps (the Root): `open`/`defaultOpen`/`delayDuration`/
+  // `disableHoverableContent`. `side`/`sideOffset` live on TooltipContent, not
+  // the root, so they are not curated here. Trigger + content are `children` →
+  // slot (§4), never also an argType (§5).
+  argTypes: {
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Open on mount (uncontrolled)',
+    },
+    delayDuration: {
+      control: 'number',
+      description: 'ms from pointer enter until the tooltip opens',
+    },
+    disableHoverableContent: { control: 'boolean' },
+  },
+  args: { defaultOpen: false, delayDuration: 700 },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <TooltipProvider>
+      <Tooltip {...args}>
+        <TooltipTrigger asChild>
+          <Button variant='outline'>Hover me</Button>
+        </TooltipTrigger>
+        <TooltipContent>Syncs every 5 minutes</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  ),
+};

package/src/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md px-3 py-1.5 text-xs',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };