create-tauri-ui 0.1.2 → 0.1.4

package/templates/sveltekit/src/lib/components/ui/tabs/TabsTrigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { TabsTriggerProps } from 'radix-svelte';
+  import { Tabs as TabsPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let value: TabsTriggerProps['value'];
+</script>
+
+<TabsPrimitive.Trigger
+  class={cn(
+    'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    className
+  )}
+  {value}
+  {...$$restProps}
+>
+  <slot />
+</TabsPrimitive.Trigger>

package/templates/sveltekit/src/lib/components/ui/tabs/index.ts

@@ -0,0 +1,7 @@
+import { Tabs as TabsPrimitive } from 'radix-svelte';
+
+export { default as TabsContent } from './TabsContent.svelte';
+export { default as TabsList } from './TabsList.svelte';
+export { default as TabsTrigger } from './TabsTrigger.svelte';
+
+export const Tabs = TabsPrimitive.Root;

package/templates/sveltekit/src/lib/components/ui/textarea/Textarea.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+
+  export let value: HTMLTextareaAttributes['value'] = undefined;
+  export { className as class };
+</script>
+
+<textarea
+  class={cn(
+    'flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  bind:value
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:paste
+  on:input
+  {...$$restProps}
+/>

package/templates/sveltekit/src/lib/components/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.svelte';

package/templates/sveltekit/src/lib/components/ui/toggle/Toggle.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { VariantProps } from 'class-variance-authority';
+  import type { ToggleRootProps } from 'radix-svelte';
+  import { cva } from 'class-variance-authority';
+  import { Toggle as TogglePrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  const toggleVariants = cva(
+    'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground',
+    {
+      variants: {
+        variant: {
+          default: 'bg-transparent',
+          outline: 'bg-transparent border border-input hover:bg-accent hover:text-accent-foreground'
+        },
+        size: {
+          default: 'h-10 px-3',
+          sm: 'h-9 px-2.5',
+          lg: 'h-11 px-5'
+        }
+      },
+      defaultVariants: {
+        variant: 'default',
+        size: 'default'
+      }
+    }
+  );
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let variant: VariantProps<typeof toggleVariants>['variant'] = 'default';
+  export let size: VariantProps<typeof toggleVariants>['size'] = 'default';
+  export let pressed: ToggleRootProps['disabled'] = false;
+  export let disabled: ToggleRootProps['disabled'] = false;
+</script>
+
+<TogglePrimitive.Root
+  class={cn(toggleVariants({ variant, size, className }))}
+  bind:pressed
+  bind:disabled
+  {...$$restProps}
+>
+  <slot />
+</TogglePrimitive.Root>

package/templates/sveltekit/src/lib/components/ui/toggle/index.ts

@@ -0,0 +1 @@
+export { default as Toggle } from './Toggle.svelte';

package/templates/sveltekit/src/lib/components/ui/tooltip/TooltipContent.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { TooltipContentProps } from 'radix-svelte/index';
+  import { Tooltip as TooltipPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let sideOffset: TooltipContentProps['sideOffset'] = 4;
+</script>
+
+<TooltipPrimitive.Portal>
+  <TooltipPrimitive.Content
+    {sideOffset}
+    class={cn(
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
+      className
+    )}
+    {...$$restProps}
+  >
+    <slot />
+  </TooltipPrimitive.Content>
+</TooltipPrimitive.Portal>

package/templates/sveltekit/src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,6 @@
+import { Tooltip as TooltipPrimitive } from 'radix-svelte';
+
+export { default as TooltipContent } from './TooltipContent.svelte';
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;

package/templates/sveltekit/src/lib/config/components.ts

@@ -0,0 +1,306 @@
+export const components = [
+  {
+    component: 'accordion',
+    name: 'Accordion',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/accordion/Accordion.svelte',
+      'src/lib/components/ui/accordion/AccordionContent.svelte',
+      'src/lib/components/ui/accordion/AccordionItem.svelte',
+      'src/lib/components/ui/accordion/AccordionTrigger.svelte',
+      'src/lib/components/ui/accordion/index.ts'
+    ]
+  },
+  {
+    component: 'alert',
+    name: 'Alert',
+    files: [
+      'src/lib/components/ui/alert/Alert.svelte',
+      'src/lib/components/ui/alert/AlertDescription.svelte',
+      'src/lib/components/ui/alert/AlertTitle.svelte',
+      'src/lib/components/ui/alert/index.ts'
+    ]
+  },
+  {
+    component: 'alert-dialog',
+    name: 'Alert Dialog',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/alert-dialog/AlertDialogAction.svelte',
+      'src/lib/components/ui/alert-dialog/AlertDialogCancel.svelte',
+      'src/lib/components/ui/alert-dialog/AlertDialogContent.svelte',
+      'src/lib/components/ui/alert-dialog/AlertDialogDescription.svelte',
+      'src/lib/components/ui/alert-dialog/AlertDialogFooter.svelte',
+      'src/lib/components/ui/alert-dialog/AlertDialogHeader.svelte',
+      'src/lib/components/ui/alert-dialog/AlertDialogOverlay.svelte',
+      'src/lib/components/ui/alert-dialog/AlertDialogPortal.svelte',
+      'src/lib/components/ui/alert-dialog/AlertDialogTitle.svelte',
+      'src/lib/components/ui/alert-dialog/index.ts'
+    ]
+  },
+  {
+    component: 'aspect-ratio',
+    name: 'Aspect Ratio',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/aspect-ratio/AspectRatio.svelte',
+      'src/lib/components/ui/aspect-ratio/index.ts'
+    ]
+  },
+  {
+    component: 'avatar',
+    name: 'Avatar',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/avatar/Avatar.svelte',
+      'src/lib/components/ui/avatar/AvatarFallback.svelte',
+      'src/lib/components/ui/avatar/AvatarImage.svelte',
+      'src/lib/components/ui/avatar/index.ts'
+    ]
+  },
+  {
+    component: 'badge',
+    name: 'Badge',
+    files: ['src/lib/components/ui/badge/Badge.svelte', 'src/lib/components/ui/badge/index.ts']
+  },
+  {
+    component: 'button',
+    name: 'Button',
+    files: ['src/lib/components/ui/button/Button.svelte', 'src/lib/components/ui/button/index.ts']
+  },
+  {
+    component: 'card',
+    name: 'Card',
+    files: [
+      'src/lib/components/ui/card/Card.svelte',
+      'src/lib/components/ui/card/CardContent.svelte',
+      'src/lib/components/ui/card/CardDescription.svelte',
+      'src/lib/components/ui/card/CardFooter.svelte',
+      'src/lib/components/ui/card/CardHeader.svelte',
+      'src/lib/components/ui/card/CardTitle.svelte',
+      'src/lib/components/ui/card/index.ts'
+    ]
+  },
+  //   {
+  //     component: "calendar",
+  //     name: "Calendar",
+  //     dependencies: ["react-day-picker", "date-fns"],
+  //     files: ["components/ui/calendar.tsx"]
+  //   },
+  {
+    component: 'checkbox',
+    name: 'Checkbox',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/checkbox/Checkbox.svelte',
+      'src/lib/components/ui/checkbox/index.ts'
+    ]
+  },
+  {
+    component: 'collapsible',
+    name: 'Collapsible',
+    dependencies: ['radix-svelte'],
+    files: ['src/lib/components/ui/collapsible/index.ts']
+  },
+  //   {
+  //     component: "command",
+  //     name: "Command",
+  //     dependencies: ["cmdk"],
+  //     files: ["components/ui/command.tsx"]
+  //   },
+  //   {
+  //     component: "context-menu",
+  //     name: "Context Menu",
+  //     dependencies: ["@radix-ui/react-context-menu"],
+  //     files: ["components/ui/context-menu.tsx"]
+  //   },
+  {
+    component: 'dialog',
+    name: 'Dialog',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/dialog/DialogContent.svelte',
+      'src/lib/components/ui/dialog/DialogDescription.svelte',
+      'src/lib/components/ui/dialog/DialogFooter.svelte',
+      'src/lib/components/ui/dialog/DialogHeader.svelte',
+      'src/lib/components/ui/dialog/DialogOverlay.svelte',
+      'src/lib/components/ui/dialog/DialogPortal.svelte',
+      'src/lib/components/ui/dialog/DialogTitle.svelte',
+      'src/lib/components/ui/dialog/index.ts'
+    ]
+  },
+  //   {
+  //     component: "dropdown-menu",
+  //     name: "Dropdown Menu",
+  //     dependencies: ["@radix-ui/react-dropdown-menu"],
+  //     files: ["components/ui/dropdown-menu.tsx"]
+  //   },
+  {
+    component: 'hover-card',
+    name: 'Hover Card',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/hover-card/HoverCardContent.svelte',
+      'src/lib/components/ui/hover-card/index.ts'
+    ]
+  },
+  {
+    component: 'input',
+    name: 'Input',
+    files: ['src/lib/components/ui/input/Input.svelte', 'src/lib/components/ui/input/index.ts']
+  },
+  {
+    component: 'label',
+    name: 'Label',
+    dependencies: ['radix-svelte'],
+    files: ['src/lib/components/ui/label/Label.svelte', 'src/lib/components/ui/label/index.ts']
+  },
+  //   {
+  //     component: "menubar",
+  //     name: "Menubar",
+  //     dependencies: ["@radix-ui/react-menubar"],
+  //     files: ["components/ui/menubar.tsx"]
+  //   },
+  //   {
+  //     component: "navigation-menu",
+  //     name: "Navigation Menu",
+  //     dependencies: ["@radix-ui/react-navigation-menu"],
+  //     files: ["components/ui/navigation-menu.tsx"]
+  //   },
+  //   {
+  //     component: "popover",
+  //     name: "Popover",
+  //     dependencies: ["@radix-ui/react-popover"],
+  //     files: ["components/ui/popover.tsx"]
+  //   },
+  {
+    component: 'progress',
+    name: 'Progress',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/progress/Progress.svelte',
+      'src/lib/components/ui/progress/index.ts'
+    ]
+  },
+  {
+    component: 'radio-group',
+    name: 'Radio Group',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/radio-group/RadioGroup.svelte',
+      'src/lib/components/ui/radio-group/RadioGroupItem.svelte',
+      'src/lib/components/ui/radio-group/index.ts'
+    ]
+  },
+  //   {
+  //     component: "scroll-area",
+  //     name: "Scroll-area",
+  //     dependencies: ["@radix-ui/react-scroll-area"],
+  //     files: ["components/ui/scroll-area.tsx"]
+  //   },
+  //   {
+  //     component: "select",
+  //     name: "Select",
+  //     dependencies: ["@radix-ui/react-select"],
+  //     files: ["components/ui/select.tsx"]
+  //   },
+  {
+    component: 'separator',
+    name: 'Separator',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/separator/Separator.svelte',
+      'src/lib/components/ui/separator/index.ts'
+    ]
+  },
+  {
+    component: 'sheet',
+    name: 'Sheet',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/sheet/SheetContent.svelte',
+      'src/lib/components/ui/sheet/SheetDescription.svelte',
+      'src/lib/components/ui/sheet/SheetFooter.svelte',
+      'src/lib/components/ui/sheet/SheetHeader.svelte',
+      'src/lib/components/ui/sheet/SheetOverlay.svelte',
+      'src/lib/components/ui/sheet/SheetPortal.svelte',
+      'src/lib/components/ui/sheet/SheetTitle.svelte',
+      'src/lib/components/ui/sheet/index.ts'
+    ]
+  },
+  {
+    component: 'skeleton',
+    name: 'Skeleton',
+    files: [
+      'src/lib/components/ui/skeleton/Skeleton.svelte',
+      'src/lib/components/ui/skeleton/index.ts'
+    ]
+  },
+  {
+    component: 'slider',
+    name: 'Slider',
+    dependencies: ['radix-svelte'],
+    files: ['src/lib/components/ui/slider/Slider.svelte', 'src/lib/components/ui/slider/index.ts']
+  },
+  {
+    component: 'switch',
+    name: 'Switch',
+    dependencies: ['radix-svelte'],
+    files: ['src/lib/components/ui/switch/Switch.svelte', 'src/lib/components/ui/switch/index.ts']
+  },
+  {
+    component: 'table',
+    name: 'Table',
+    files: [
+      'src/lib/components/ui/table/Table.svelte',
+      'src/lib/components/ui/table/TableBody.svelte',
+      'src/lib/components/ui/table/TableCaption.svelte',
+      'src/lib/components/ui/table/TableCell.svelte',
+      'src/lib/components/ui/table/TableFooter.svelte',
+      'src/lib/components/ui/table/TableHead.svelte',
+      'src/lib/components/ui/table/TableHeader.svelte',
+      'src/lib/components/ui/table/TableRow.svelte',
+      'src/lib/components/ui/table/index.ts'
+    ]
+  },
+  {
+    component: 'tabs',
+    name: 'Tabs',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/tabs/TabsContent.svelte',
+      'src/lib/components/ui/tabs/TabsList.svelte',
+      'src/lib/components/ui/tabs/TabsTrigger.svelte',
+      'src/lib/components/ui/tabs/index.ts'
+    ]
+  },
+  {
+    component: 'textarea',
+    name: 'Textarea',
+    files: [
+      'src/lib/components/ui/textarea/Textarea.svelte',
+      'src/lib/components/ui/textarea/index.ts'
+    ]
+  },
+  //   {
+  //     component: "toast",
+  //     name: "Toast",
+  //     dependencies: ["@radix-ui/react-toast"],
+  //     files: ["components/ui/toast.tsx", "components/ui/use-toast.ts"]
+  //   },
+  {
+    component: 'toggle',
+    name: 'Toggle',
+    dependencies: ['radix-svelte'],
+    files: ['src/lib/components/ui/toggle/Toggle.svelte', 'src/lib/components/ui/toggle/index.ts']
+  },
+  {
+    component: 'tooltip',
+    name: 'Tooltip',
+    dependencies: ['radix-svelte'],
+    files: [
+      'src/lib/components/ui/tooltip/TooltipContent.svelte',
+      'src/lib/components/ui/tooltip/index.ts'
+    ]
+  }
+];