fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/sidebar/sidebar-rail.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"button">
+
+const { class: className, type = "button", ...props } = Astro.props
+---
+
+<button
+  data-sidebar="rail"
+  data-slot="sidebar-rail"
+  aria-label="Toggle Sidebar"
+  tabindex={-1}
+  title="Toggle Sidebar"
+  type={type}
+  class={cn(
+    "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+    "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+    "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+    "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+    "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+    "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+    className
+  )}
+  {...props}></button>

package/src/components/ui/sidebar/sidebar-separator.astro

@@ -0,0 +1,17 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+type Props = ComponentProps<typeof Separator>
+
+const { class: className, ...props } = Astro.props
+---
+
+<Separator
+  data-slot="sidebar-separator"
+  data-sidebar="separator"
+  class={cn("bg-sidebar-border mx-2 w-auto", className)}
+  {...props}
+/>

package/src/components/ui/sidebar/sidebar-trigger.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"button"> & {
+  variant?: "ghost" | "secondary"
+}
+
+const { class: className, ...props } = Astro.props
+---
+
+<Button
+  data-sidebar="trigger"
+  data-slot="sidebar-trigger"
+  variant="ghost"
+  size="icon-sm"
+  class={className}
+  aria-keyshortcuts="Meta+B"
+  {...props}
+>
+  <Icon name="panel-left" />
+  <span class="sr-only">Toggle Sidebar</span>
+  <slot />
+</Button>

package/src/components/ui/sidebar/sidebar.astro

@@ -0,0 +1,118 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+
+type Props = Omit<HTMLAttributes<"div">, "dir"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+  state?: "expanded" | "collapsed"
+}
+
+const {
+  class: className,
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  state = "expanded",
+  ...props
+} = Astro.props
+
+const desktopState = collapsible === "none" ? "expanded" : state
+const desktopCollapsible = desktopState === "collapsed" ? collapsible : ""
+---
+
+{
+  collapsible === "none" ? (
+    <div
+      data-slot="sidebar"
+      data-state="expanded"
+      data-collapsible="none"
+      data-variant={variant}
+      data-side={side}
+      data-sidebar-collapsible="none"
+      class={cn(
+        "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+        className
+      )}
+      {...props}
+    >
+      <slot />
+    </div>
+  ) : (
+    <>
+      <Sheet data-sidebar="sheet" defaultOpen={false}>
+        <SheetContent
+          side={side}
+          showCloseButton={false}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          style="--sidebar-width: var(--sidebar-width-mobile);"
+          class={cn(
+            "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden",
+            className
+          )}
+        >
+          <SheetHeader class="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div class="flex h-full w-full flex-col">
+            <slot />
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <div
+        data-slot="sidebar"
+        data-state={desktopState}
+        data-collapsible={desktopCollapsible}
+        data-variant={variant}
+        data-side={side}
+        data-sidebar-collapsible={collapsible}
+        class="group peer text-sidebar-foreground hidden md:block"
+      >
+        <div
+          data-slot="sidebar-gap"
+          class={cn(
+            "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+          )}
+        />
+        <div
+          data-slot="sidebar-container"
+          data-side={side}
+          class={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width) data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width) md:flex",
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            data-slot="sidebar-inner"
+            class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
+          >
+            <slot />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from "./skeleton.astro"

package/src/components/ui/skeleton/skeleton.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="skeleton"
+  class={cn("bg-muted animate-pulse rounded-md", className)}
+  {...props}
+>
+</div>

package/src/components/ui/slider/index.ts

@@ -0,0 +1 @@
+export { default as Slider } from "./slider.astro"

package/src/components/ui/slider/slider.astro

@@ -0,0 +1,84 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type SliderValue = number | [number, number] | string
+type ThumbAlignment = "center" | "edge" | "edge-client-only"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultValue?: SliderValue
+  min?: number
+  max?: number
+  step?: number
+  largeStep?: number
+  orientation?: "horizontal" | "vertical"
+  thumbAlignment?: ThumbAlignment
+  disabled?: boolean
+}
+
+const {
+  class: className,
+  defaultValue,
+  min,
+  max,
+  step,
+  largeStep,
+  orientation = "horizontal",
+  thumbAlignment = "edge",
+  disabled,
+  ...props
+} = Astro.props
+
+const serializedDefaultValue = Array.isArray(defaultValue)
+  ? defaultValue.join(",")
+  : defaultValue
+const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
+---
+
+<div
+  data-slot="slider"
+  data-default-value={serializedDefaultValue}
+  data-min={min}
+  data-max={max}
+  data-step={step}
+  data-large-step={largeStep}
+  data-orientation={orientation}
+  data-thumb-alignment={thumbAlignment}
+  data-disabled={disabled}
+  class={cn(
+    "relative flex touch-none items-center select-none data-disabled:opacity-50 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+    className
+  )}
+  {...props}
+>
+  <div
+    data-slot="slider-control"
+    class="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
+  >
+    <div
+      data-slot="slider-track"
+      class="bg-muted relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+    >
+      <div
+        data-slot="slider-range"
+        class="bg-primary rounded-full select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+      >
+      </div>
+    </div>
+    {
+      Array.from({ length: thumbCount }).map(() => (
+        <div
+          data-slot="slider-thumb"
+          class="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
+        />
+      ))
+    }
+  </div>
+</div>
+
+<script>
+  import { create } from "@data-slot/slider"
+
+  create()
+</script>

package/src/components/ui/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from "./spinner.astro"

package/src/components/ui/spinner/spinner.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"svg"> & {
+  color?: string
+  size?: number | string
+  "stroke-width"?: number | string
+  absoluteStrokeWidth?: boolean
+  title?: string
+}
+
+const { class: className, ...props } = Astro.props
+---
+
+<Icon
+  {...props}
+  role="status"
+  aria-label="Loading"
+  name="loader-circle"
+  class={cn("size-4 animate-spin", className)}
+/>

package/src/components/ui/switch/index.ts

@@ -1 +1 @@
-export { default as Switch } from './Switch.vue'
+export { default as Switch } from "./switch.astro"

package/src/components/ui/switch/switch.astro

@@ -0,0 +1,71 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span"> & {
+  defaultChecked?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  required?: boolean
+  name?: string
+  size?: "default" | "sm"
+  value?: string
+  uncheckedValue?: string
+}
+
+const {
+  class: className,
+  defaultChecked,
+  disabled,
+  readOnly,
+  required,
+  name,
+  size = "default",
+  value,
+  uncheckedValue,
+  ...props
+} = Astro.props
+
+const initialChecked = defaultChecked === true
+const switchStyle =
+  "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-default"
+const switchSizeStyle = {
+  sm: "h-[14px] w-[24px]",
+  default: "h-[18.4px] w-[32px]",
+}
+---
+
+<span
+  role="switch"
+  aria-checked={initialChecked ? "true" : "false"}
+  aria-disabled={disabled ? "true" : undefined}
+  aria-readonly={readOnly ? "true" : undefined}
+  aria-required={required ? "true" : undefined}
+  data-slot="switch"
+  data-size={size}
+  data-checked={initialChecked ? "" : undefined}
+  data-unchecked={initialChecked ? undefined : ""}
+  data-default-checked={defaultChecked}
+  data-disabled={disabled}
+  data-read-only={readOnly}
+  data-readonly={readOnly}
+  data-required={required}
+  data-name={name}
+  data-value={value}
+  data-unchecked-value={uncheckedValue}
+  class={cn(switchStyle, switchSizeStyle[size], className)}
+  {...props}
+>
+  <span
+    aria-hidden="true"
+    data-slot="switch-thumb"
+    class="bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
+  ></span>
+</span>
+
+<script>
+  import { create } from "@data-slot/switch"
+
+  create()
+</script>

package/src/components/ui/table/index.ts

@@ -0,0 +1,8 @@
+export { default as Table } from "./table.astro"
+export { default as TableHeader } from "./table-header.astro"
+export { default as TableBody } from "./table-body.astro"
+export { default as TableFooter } from "./table-footer.astro"
+export { default as TableRow } from "./table-row.astro"
+export { default as TableHead } from "./table-head.astro"
+export { default as TableCell } from "./table-cell.astro"
+export { default as TableCaption } from "./table-caption.astro"

package/src/components/ui/table/table-body.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"tbody">
+
+const { class: className, ...props } = Astro.props
+---
+
+<tbody
+  data-slot="table-body"
+  class={cn("[&_tr:last-child]:border-0", className)}
+  {...props}
+>
+  <slot />
+</tbody>

package/src/components/ui/table/table-caption.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"caption">
+
+const { class: className, ...props } = Astro.props
+---
+
+<caption
+  data-slot="table-caption"
+  class={cn("text-muted-foreground mt-4 text-sm", className)}
+  {...props}
+>
+  <slot />
+</caption>

package/src/components/ui/table/table-cell.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"td">
+
+const { class: className, ...props } = Astro.props
+---
+
+<td
+  data-slot="table-cell"
+  class={cn(
+    "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</td>

package/src/components/ui/table/table-footer.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"tfoot">
+
+const { class: className, ...props } = Astro.props
+---
+
+<tfoot
+  data-slot="table-footer"
+  class={cn(
+    "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</tfoot>

package/src/components/ui/table/table-head.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"th">
+
+const { class: className, ...props } = Astro.props
+---
+
+<th
+  data-slot="table-head"
+  class={cn(
+    "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</th>

package/src/components/ui/table/table-header.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"thead">
+
+const { class: className, ...props } = Astro.props
+---
+
+<thead
+  data-slot="table-header"
+  class={cn("[&_tr]:border-b", className)}
+  {...props}
+>
+  <slot />
+</thead>

package/src/components/ui/table/table-row.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"tr">
+
+const { class: className, ...props } = Astro.props
+---
+
+<tr
+  data-slot="table-row"
+  class={cn(
+    "hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</tr>

package/src/components/ui/table/table.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"table">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+  <table
+    data-slot="table"
+    class={cn("w-full caption-bottom text-sm", className)}
+    {...props}
+  >
+    <slot />
+  </table>
+</div>

package/src/components/ui/tabs/index.ts

@@ -0,0 +1,8 @@
+export { default as Tabs } from "./tabs.astro"
+export { default as TabsList } from "./tabs-list.astro"
+export { default as TabsTrigger } from "./tabs-trigger.astro"
+export { default as TabsContent } from "./tabs-content.astro"
+export {
+  tabsListVariants,
+  type TabsListVariantProps,
+} from "./tabs-list-variants"

package/src/components/ui/tabs/tabs-content.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  value?: string
+}
+
+const { class: className, value, ...props } = Astro.props
+---
+
+<div
+  data-slot="tabs-content"
+  data-value={value}
+  class={cn("flex-1 text-sm outline-none", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/tabs/tabs-list-variants.ts

@@ -0,0 +1,18 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const tabsListVariants = cva(
+  "group/tabs-list text-muted-foreground relative inline-flex w-fit items-center justify-center rounded-lg p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export type TabsListVariantProps = VariantProps<typeof tabsListVariants>

package/src/components/ui/tabs/tabs-list.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+import { tabsListVariants } from "./tabs-list-variants"
+
+type Props = HTMLAttributes<"div"> & {
+  variant?: "default" | "line"
+}
+
+const { class: className, variant = "default", ...props } = Astro.props
+---
+
+<div
+  data-slot="tabs-list"
+  data-variant={variant}
+  class={cn(tabsListVariants({ variant }), className)}
+  {...props}
+>
+  {
+    variant === "line" && (
+      <div
+        data-slot="tabs-indicator"
+        class="bg-border/60 pointer-events-none absolute rounded-full transition-[left,top,width,height] duration-200 group-data-horizontal/tabs-list:bottom-0 group-data-horizontal/tabs-list:left-(--active-tab-left,0px) group-data-horizontal/tabs-list:h-0.5 group-data-horizontal/tabs-list:w-(--active-tab-width,0px) group-data-vertical/tabs-list:top-(--active-tab-top,0px) group-data-vertical/tabs-list:left-0 group-data-vertical/tabs-list:h-(--active-tab-height,0px) group-data-vertical/tabs-list:w-0.5"
+      />
+    )
+  }
+  <slot />
+</div>