@starwind-ui/core 1.8.0 → 1.10.0

package/dist/src/components/table/TableHead.astro

@@ -4,13 +4,13 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"th"> & VariantProps<typeof tableHead>;
 
-const tableHead = tv({
+export const tableHead = tv({
   base: "text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<th data-table-head class={tableHead({ class: className })} {...rest} role="columnheader">
+<th data-slot="table-head" class={tableHead({ class: className })} {...rest} role="columnheader">
   <slot />
 </th>

package/dist/src/components/table/TableHeader.astro

@@ -4,13 +4,13 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"thead"> & VariantProps<typeof tableHeader>;
 
-const tableHeader = tv({
+export const tableHeader = tv({
   base: "[&_tr]:border-b",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<thead data-table-header class={tableHeader({ class: className })} {...rest}>
+<thead data-slot="table-header" class={tableHeader({ class: className })} {...rest}>
   <slot />
 </thead>

package/dist/src/components/table/TableRow.astro

@@ -4,13 +4,13 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"tr"> & VariantProps<typeof tableRow>;
 
-const tableRow = tv({
+export const tableRow = tv({
   base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<tr data-table-row class={tableRow({ class: className })} {...rest} role="row">
+<tr data-slot="table-row" class={tableRow({ class: className })} {...rest} role="row">
   <slot />
 </tr>

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

@@ -1,13 +1,34 @@
-import Table from "./Table.astro";
-import TableBody from "./TableBody.astro";
-import TableCaption from "./TableCaption.astro";
-import TableCell from "./TableCell.astro";
-import TableFoot from "./TableFoot.astro";
-import TableHead from "./TableHead.astro";
-import TableHeader from "./TableHeader.astro";
-import TableRow from "./TableRow.astro";
+import Table, { table } from "./Table.astro";
+import TableBody, { tableBody } from "./TableBody.astro";
+import TableCaption, { tableCaption } from "./TableCaption.astro";
+import TableCell, { tableCell } from "./TableCell.astro";
+import TableFoot, { tableFoot } from "./TableFoot.astro";
+import TableHead, { tableHead } from "./TableHead.astro";
+import TableHeader, { tableHeader } from "./TableHeader.astro";
+import TableRow, { tableRow } from "./TableRow.astro";
 
-export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRow };
+const TableVariants = {
+  table,
+  tableBody,
+  tableCaption,
+  tableCell,
+  tableFoot,
+  tableHead,
+  tableHeader,
+  tableRow,
+};
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFoot,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableVariants,
+};
 
 export default {
   Root: Table,

package/dist/src/components/tabs/Tabs.astro

@@ -7,7 +7,7 @@ interface Props extends HTMLAttributes<"div"> {
   syncKey?: string;
 }
 
-const tabs = tv({ base: "starwind-tabs" });
+export const tabs = tv({ base: "starwind-tabs" });
 
 const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
 ---
@@ -16,6 +16,7 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
   class={tabs({ class: className })}
   data-default-value={defaultValue}
   data-sync-key={syncKey}
+  data-slot="tabs"
   {...rest}
 >
   <slot />

package/dist/src/components/tabs/TabsContent.astro

@@ -6,13 +6,16 @@ interface Props extends Omit<HTMLAttributes<"div">, "id" | "role" | "tabindex" |
   value: string;
 }
 
-const tabsContent = tv({ base: "mt-2 focus-visible:outline-2 focus-visible:outline-offset-2" });
+export const tabsContent = tv({
+  base: "mt-2 focus-visible:outline-2 focus-visible:outline-offset-2",
+});
 
 const { value, class: className, ...rest } = Astro.props;
 ---
 
 <div
   class={tabsContent({ class: className })}
+  data-slot="tabs-content"
   data-tabs-content
   data-value={value}
   data-state="inactive"

package/dist/src/components/tabs/TabsList.astro

@@ -4,13 +4,19 @@ import { tv } from "tailwind-variants";
 
 type Props = Omit<HTMLAttributes<"div">, "role">;
 
-const tabsList = tv({
-  base: "bg-muted text-muted-foreground inline-flex w-full items-center justify-center rounded-md p-1",
+export const tabsList = tv({
+  base: "bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-md p-1",
 });
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={tabsList({ class: className })} data-tabs-list role="tablist" {...rest}>
+<div
+  class={tabsList({ class: className })}
+  data-slot="tabs-list"
+  data-tabs-list
+  role="tablist"
+  {...rest}
+>
   <slot />
 </div>

package/dist/src/components/tabs/TabsTrigger.astro

@@ -6,11 +6,13 @@ interface Props extends Omit<HTMLAttributes<"button">, "type" | "id" | "role"> {
   value: string;
 }
 
-const tabsTrigger = tv({
+export const tabsTrigger = tv({
   base: [
-    "starwind-transition-colors inline-flex grow items-center justify-center rounded-sm px-3 py-1.5 font-medium whitespace-nowrap",
+    "inline-flex grow items-center justify-center gap-2 rounded-sm border border-transparent px-3 py-1.5 font-medium whitespace-nowrap transition-[color,box-shadow]",
     "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-    "focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-2",
+    "dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:text-muted-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "focus-visible:border-outline focus-visible:ring-outline/50 focus-visible:outline-outline focus-visible:ring-3 focus-visible:outline-1",
     "disabled:pointer-events-none disabled:opacity-50",
   ],
 });
@@ -20,6 +22,7 @@ const { value, class: className, ...rest } = Astro.props;
 
 <button
   class={tabsTrigger({ class: className })}
+  data-slot="tabs-trigger"
   data-tabs-trigger
   data-value={value}
   data-state="inactive"

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

@@ -1,9 +1,16 @@
-import Tabs from "./Tabs.astro";
-import TabsContent from "./TabsContent.astro";
-import TabsList from "./TabsList.astro";
-import TabsTrigger from "./TabsTrigger.astro";
+import Tabs, { tabs } from "./Tabs.astro";
+import TabsContent, { tabsContent } from "./TabsContent.astro";
+import TabsList, { tabsList } from "./TabsList.astro";
+import TabsTrigger, { tabsTrigger } from "./TabsTrigger.astro";
 
-export { Tabs, TabsContent, TabsList, TabsTrigger };
+const TabsVariants = {
+  tabs,
+  tabsContent,
+  tabsList,
+  tabsTrigger,
+};
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, TabsVariants };
 
 export default {
   Root: Tabs,

package/dist/src/components/textarea/Textarea.astro

@@ -4,10 +4,10 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"textarea"> & VariantProps<typeof textarea>;
 
-const textarea = tv({
+export const textarea = tv({
   base: [
-    "border-input bg-background text-foreground ring-offset-background min-h-10 w-full rounded-md border",
-    "focus:outline-outline focus:ring-0 focus:outline-2 focus:outline-offset-2",
+    "border-input dark:bg-input/30 text-foreground ring-offset-background min-h-10 w-full rounded-md border bg-transparent shadow-xs",
+    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] focus-visible:ring-3",
     "file:text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium",
     "disabled:cursor-not-allowed disabled:opacity-50",
     "peer placeholder:text-muted-foreground",
@@ -25,4 +25,4 @@ const textarea = tv({
 const { size, class: className, ...rest } = Astro.props;
 ---
 
-<textarea class={textarea({ size, class: className })} {...rest}></textarea>
+<textarea class={textarea({ size, class: className })} data-slot="textarea" {...rest}></textarea>

package/dist/src/components/textarea/index.ts

@@ -1,5 +1,9 @@
-import Textarea from "./Textarea.astro";
+import Textarea, { textarea } from "./Textarea.astro";
 
-export { Textarea };
+const TextareaVariants = {
+  textarea,
+};
+
+export { Textarea, TextareaVariants };
 
 export default Textarea;

package/dist/src/components/tooltip/Tooltip.astro

@@ -17,7 +17,7 @@ type Props = HTMLAttributes<"div"> & {
   disableHoverableContent?: boolean;
 };
 
-const tooltip = tv({ base: "starwind-tooltip relative inline-block" });
+export const tooltip = tv({ base: "starwind-tooltip relative inline-block" });
 
 const {
   openDelay = 200,
@@ -29,6 +29,7 @@ const {
 
 <div
   class={tooltip({ class: className })}
+  data-slot="tooltip"
   data-state="closed"
   data-open-delay={openDelay}
   data-close-delay={closeDelay}

package/dist/src/components/tooltip/TooltipContent.astro

@@ -1,4 +1,5 @@
 ---
+import CaretUp from "@tabler/icons/filled/caret-up.svg";
 import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
@@ -15,7 +16,7 @@ type Props = HTMLAttributes<"div"> & {
   align?: "start" | "center" | "end";
   /**
    * Offset distance in pixels
-   * @default 4
+   * @default 8
    */
   sideOffset?: number;
   /**
@@ -30,11 +31,11 @@ type Props = HTMLAttributes<"div"> & {
   animationDuration?: number;
 };
 
-const tooltipContent = tv({
+export const tooltipContent = tv({
   base: [
     "starwind-tooltip-content",
-    "absolute z-50 hidden px-3 py-1.5 whitespace-nowrap shadow-sm will-change-transform",
-    "bg-popover text-popover-foreground rounded-md border",
+    "absolute z-50 hidden px-3 py-1.5 whitespace-nowrap shadow-xs will-change-transform",
+    "bg-foreground text-background rounded-md",
     "animate-in fade-in zoom-in-95",
     "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
   ],
@@ -72,10 +73,23 @@ const tooltipContent = tv({
   ],
 });
 
+export const tooltipCaret = tv({
+  base: ["text-foreground absolute z-50 size-4"],
+  variants: {
+    side: {
+      top: "bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(50%+1px)] rotate-180",
+      bottom: "top-0 left-1/2 -translate-x-1/2 -translate-y-[calc(50%+1px)]",
+      left: "top-1/2 right-0 translate-x-[calc(50%+1px)] -translate-y-1/2 rotate-90",
+      right: "top-1/2 left-0 -translate-x-[calc(50%+1px)] -translate-y-1/2 -rotate-90",
+    },
+  },
+  defaultVariants: { side: "top" },
+});
+
 const {
   side = "top",
   align = "center",
-  sideOffset = 4,
+  sideOffset = 8,
   avoidCollisions = true,
   animationDuration = 150,
   class: className,
@@ -84,6 +98,7 @@ const {
 
 <div
   class={tooltipContent({ side, align, class: className })}
+  data-slot="tooltip-content"
   data-state="closed"
   data-side={side}
   data-align={align}
@@ -95,4 +110,5 @@ const {
   }}
 >
   <slot> My tooltip! </slot>
+  <CaretUp class={tooltipCaret({ side })} />
 </div>

package/dist/src/components/tooltip/TooltipTrigger.astro

@@ -3,7 +3,7 @@
  * This component is used to trigger the tooltip
  * All it does is require a slot
  */
-// eslint-disable-next-line
+
 type Props = { children: any };
 ---
 

package/dist/src/components/tooltip/index.ts

@@ -1,8 +1,13 @@
-import Tooltip from "./Tooltip.astro";
-import TooltipContent from "./TooltipContent.astro";
+import Tooltip, { tooltip } from "./Tooltip.astro";
+import TooltipContent, { tooltipContent } from "./TooltipContent.astro";
 import TooltipTrigger from "./TooltipTrigger.astro";
 
-export { Tooltip, TooltipContent, TooltipTrigger };
+const TooltipVariants = {
+  tooltip,
+  tooltipContent,
+};
+
+export { Tooltip, TooltipContent, TooltipTrigger, TooltipVariants };
 
 export default {
   Root: Tooltip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwind-ui/core",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Starwind UI core components and registry",
   "license": "MIT",
   "author": {