fulldev-ui 0.7.0 → 0.9.0

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

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

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

@@ -0,0 +1 @@
+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

@@ -6,4 +6,3 @@ 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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"tbody"> {}
+type Props = HTMLAttributes<"tbody">
 
 const { class: className, ...props } = Astro.props
 ---
@@ -15,4 +15,3 @@ const { class: className, ...props } = Astro.props
 >
   <slot />
 </tbody>
-

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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"caption"> {}
+type Props = HTMLAttributes<"caption">
 
 const { class: className, ...props } = Astro.props
 ---
@@ -15,4 +15,3 @@ const { class: className, ...props } = Astro.props
 >
   <slot />
 </caption>
-

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

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

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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"tfoot"> {}
+type Props = HTMLAttributes<"tfoot">
 
 const { class: className, ...props } = Astro.props
 ---
@@ -18,4 +18,3 @@ const { class: className, ...props } = Astro.props
 >
   <slot />
 </tfoot>
-

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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"th"> {}
+type Props = HTMLAttributes<"th">
 
 const { class: className, ...props } = Astro.props
 ---
@@ -11,11 +11,10 @@ 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 [&>[role=checkbox]]:translate-y-[2px]",
+    "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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"thead"> {}
+type Props = HTMLAttributes<"thead">
 
 const { class: className, ...props } = Astro.props
 ---

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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"tr"> {}
+type Props = HTMLAttributes<"tr">
 
 const { class: className, ...props } = Astro.props
 ---
@@ -11,11 +11,10 @@ const { class: className, ...props } = Astro.props
 <tr
   data-slot="table-row"
   class={cn(
-    "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+    "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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"table"> {}
+type Props = HTMLAttributes<"table">
 
 const { class: className, ...props } = Astro.props
 ---

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

@@ -2,4 +2,7 @@ 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

@@ -3,28 +3,18 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {
-  value: string
+type Props = HTMLAttributes<"div"> & {
+  value?: string
 }
 
 const { class: className, value, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      role="tabpanel"
-      data-slot="tabs-content"
-      data-value={value}
-      data-state="inactive"
-      hidden
-      class={cn("flex-1 outline-none", className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
-
+<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

@@ -3,25 +3,28 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+import { tabsListVariants } from "./tabs-list-variants"
 
-const { class: className, ...props } = Astro.props
+type Props = HTMLAttributes<"div"> & {
+  variant?: "default" | "line"
+}
 
-const slot = await Astro.slots.render("default")
+const { class: className, variant = "default", ...props } = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="tabs-list"
-      role="tablist"
-      class={cn(
-        "bg-muted text-muted-foreground flex h-auto w-auto flex-row items-center justify-center rounded-lg p-[3px]",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<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>

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

@@ -3,35 +3,24 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends Omit<HTMLAttributes<"button">, "class"> {
-  class?: string
-  value: string
-  disabled?: boolean
+type Props = HTMLAttributes<"button"> & {
+  value?: string
 }
 
-const { class: className, value, disabled = false, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
+const { class: className, value, ...props } = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <button
-      type="button"
-      role="tab"
-      data-slot="tabs-trigger"
-      data-value={value}
-      data-state="inactive"
-      aria-selected="false"
-      disabled={disabled}
-      class={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </button>
-  )
-}
-
+<button
+  data-slot="tabs-trigger"
+  data-value={value}
+  class={cn(
+    "text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+    "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+    "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</button>

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

@@ -3,103 +3,36 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {
+type Props = HTMLAttributes<"div"> & {
   defaultValue?: string
+  orientation?: "horizontal" | "vertical"
+  activationMode?: "auto" | "manual"
 }
 
-const { class: className, defaultValue, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
+const {
+  class: className,
+  defaultValue,
+  orientation = "horizontal",
+  activationMode,
+  ...props
+} = Astro.props
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="tabs"
-      data-default-value={defaultValue}
-      class={cn("flex flex-col gap-2", className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  data-slot="tabs"
+  data-default-value={defaultValue}
+  data-orientation={orientation}
+  data-activation-mode={activationMode}
+  data-horizontal={orientation === "horizontal" ? "" : undefined}
+  data-vertical={orientation === "vertical" ? "" : undefined}
+  class={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
+  {...props}
+>
+  <slot />
+</div>
 
 <script>
-  function initTabs() {
-    const tabsElements = document.querySelectorAll('[data-slot="tabs"]')
-
-    tabsElements.forEach((tabs) => {
-      const defaultValue = tabs.getAttribute("data-default-value")
-      const triggers = tabs.querySelectorAll('[data-slot="tabs-trigger"]')
-      const contents = tabs.querySelectorAll('[data-slot="tabs-content"]')
-
-      // Set initial state
-      if (defaultValue) {
-        contents.forEach((content) => {
-          const value = content.getAttribute("data-value")
-          if (value === defaultValue) {
-            content.removeAttribute("hidden")
-            content.setAttribute("data-state", "active")
-          } else {
-            content.setAttribute("hidden", "")
-            content.setAttribute("data-state", "inactive")
-          }
-        })
-
-        triggers.forEach((trigger) => {
-          const value = trigger.getAttribute("data-value")
-          if (value === defaultValue) {
-            trigger.setAttribute("data-state", "active")
-            trigger.setAttribute("aria-selected", "true")
-          } else {
-            trigger.setAttribute("data-state", "inactive")
-            trigger.setAttribute("aria-selected", "false")
-          }
-        })
-      }
+  import { create } from "@data-slot/tabs"
 
-      // Handle click events
-      triggers.forEach((trigger) => {
-        trigger.addEventListener("click", () => {
-          const value = trigger.getAttribute("data-value")
-
-          // Update all triggers
-          triggers.forEach((t) => {
-            const tValue = t.getAttribute("data-value")
-            if (tValue === value) {
-              t.setAttribute("data-state", "active")
-              t.setAttribute("aria-selected", "true")
-            } else {
-              t.setAttribute("data-state", "inactive")
-              t.setAttribute("aria-selected", "false")
-            }
-          })
-
-          // Update all contents
-          contents.forEach((content) => {
-            const cValue = content.getAttribute("data-value")
-            if (cValue === value) {
-              content.removeAttribute("hidden")
-              content.setAttribute("data-state", "active")
-            } else {
-              content.setAttribute("hidden", "")
-              content.setAttribute("data-state", "inactive")
-            }
-          })
-        })
-      })
-    })
-  }
-
-  // Initialize on page load
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initTabs)
-  } else {
-    initTabs()
-  }
-
-  // Re-initialize after page navigation (for view transitions)
-  document.addEventListener("astro:page-load", initTabs)
+  create()
 </script>
-

package/src/components/ui/textarea/textarea.astro

@@ -3,15 +3,21 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"textarea"> {}
+type Props = HTMLAttributes<"textarea">
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  "data-slot": dataSlot = "textarea",
+  ...props
+} = Astro.props
 ---
 
 <textarea
-  data-slot="textarea"
+  data-slot={dataSlot}
   class={cn(
-    "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+    "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
     className
   )}
-  {...props}></textarea>
+  {...props}
+>
+</textarea>

package/src/components/ui/theme-toggle/theme-provider.astro

@@ -1,26 +1,61 @@
 <script is:inline>
-  ;(() => {
-    if (window.__themeInitialized) return
-    window.__themeInitialized = true
-
-    const theme = (() => {
-      const localStorageTheme = localStorage?.getItem("theme") ?? ""
-      if (["dark", "light"].includes(localStorageTheme)) {
-        return localStorageTheme
-      }
-      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        return "dark"
-      }
-      return "light"
-    })()
-
-    if (theme === "light") {
-      document.documentElement.classList.remove("dark")
-    } else {
-      document.documentElement.classList.add("dark")
+  const getThemePreference = () => {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+      return localStorage.getItem("theme")
     }
 
-    document.documentElement.setAttribute("data-theme", theme)
-    window.localStorage.setItem("theme", theme)
-  })()
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light"
+  }
+
+  const disableTransitionsTemporarily = () => {
+    const style = document.createElement("style")
+
+    style.appendChild(
+      document.createTextNode(
+        "*, *::before, *::after { transition: none !important; }"
+      )
+    )
+
+    document.head.appendChild(style)
+
+    return () => {
+      void document.documentElement.offsetHeight
+
+      requestAnimationFrame(() => {
+        style.remove()
+      })
+    }
+  }
+
+  const applyTheme = (theme, disableTransitions = false) => {
+    const restoreTransitions = disableTransitions
+      ? disableTransitionsTemporarily()
+      : null
+
+    document.documentElement.classList[theme === "dark" ? "add" : "remove"](
+      "dark"
+    )
+
+    restoreTransitions?.()
+  }
+
+  window.__setTheme = (theme) => {
+    applyTheme(theme, true)
+  }
+
+  applyTheme(getThemePreference())
+
+  if (typeof localStorage !== "undefined") {
+    const observer = new MutationObserver(() => {
+      const isDark = document.documentElement.classList.contains("dark")
+      localStorage.setItem("theme", isDark ? "dark" : "light")
+    })
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+  }
 </script>