@starwind-ui/core 1.6.2 → 1.7.0

package/dist/src/components/select/SelectContent.astro

@@ -3,80 +3,80 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
-	/**
-	 * Side of the tooltip
-	 * @default bottom
-	 */
-	side?: "top" | "bottom";
-	/**
-	 * Alignment of the dropdown
-	 * @default start
-	 */
-	align?: "start" | "center" | "end";
-	/**
-	 * Offset distance in pixels
-	 * @default 4
-	 */
-	sideOffset?: number;
-	/**
-	 * Open and close animation duration in milliseconds
-	 * @default 150
-	 */
-	animationDuration?: number;
+  /**
+   * Side of the tooltip
+   * @default bottom
+   */
+  side?: "top" | "bottom";
+  /**
+   * Alignment of the dropdown
+   * @default start
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Offset distance in pixels
+   * @default 4
+   */
+  sideOffset?: number;
+  /**
+   * Open and close animation duration in milliseconds
+   * @default 150
+   */
+  animationDuration?: number;
 };
 
 const selectContent = tv({
-	base: [
-		"starwind-select-content",
-		"bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border shadow-md",
-		"data-[state=open]:animate-in fade-in zoom-in-95 overflow-hidden will-change-transform",
-		"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
-	],
-	variants: {
-		side: {
-			bottom: "slide-in-from-top-2 slide-out-to-top-2 top-full",
-			top: "slide-in-from-bottom-2 slide-out-to-bottom-2 bottom-full",
-		},
-		align: {
-			start: "slide-in-from-left-1 slide-out-to-left-1 left-0",
-			center: "left-1/2 -translate-x-1/2",
-			end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
-		},
-	},
-	defaultVariants: { side: "bottom", align: "start" },
+  base: [
+    "starwind-select-content",
+    "bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border shadow-md",
+    "data-[state=open]:animate-in fade-in zoom-in-95 overflow-hidden will-change-transform",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
+  ],
+  variants: {
+    side: {
+      bottom: "slide-in-from-top-2 slide-out-to-top-2 top-full",
+      top: "slide-in-from-bottom-2 slide-out-to-bottom-2 bottom-full",
+    },
+    align: {
+      start: "slide-in-from-left-1 slide-out-to-left-1 left-0",
+      center: "left-1/2 -translate-x-1/2",
+      end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
+    },
+  },
+  defaultVariants: { side: "bottom", align: "start" },
 });
 
 const selectContentInner = tv({
-	base: "max-h-96 w-full min-w-(--select-trigger-width) overflow-y-auto p-1",
+  base: "max-h-96 w-full min-w-(--select-trigger-width) overflow-y-auto p-1",
 });
 
 const {
-	class: className,
-	side = "bottom",
-	align = "start",
-	sideOffset = 4,
-	animationDuration = 150,
-	...rest
+  class: className,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  animationDuration = 150,
+  ...rest
 } = Astro.props;
 ---
 
 <div
-	class={selectContent({ side, align, class: className })}
-	role="listbox"
-	data-side={side}
-	data-align={align}
-	data-state="closed"
-	tabindex="-1"
-	style={{
-		// hide the content initially. Script will remove this
-		display: "none",
-		animationDuration: `${animationDuration}ms`,
-		marginTop: side === "bottom" ? `${sideOffset}px` : undefined,
-		marginBottom: side === "top" ? `${sideOffset}px` : undefined,
-	}}
-	{...rest}
+  class={selectContent({ side, align, class: className })}
+  role="listbox"
+  data-side={side}
+  data-align={align}
+  data-state="closed"
+  tabindex="-1"
+  style={{
+    // hide the content initially. Script will remove this
+    display: "none",
+    animationDuration: `${animationDuration}ms`,
+    marginTop: side === "bottom" ? `${sideOffset}px` : undefined,
+    marginBottom: side === "top" ? `${sideOffset}px` : undefined,
+  }}
+  {...rest}
 >
-	<div class={selectContentInner()}>
-		<slot />
-	</div>
+  <div class={selectContentInner()}>
+    <slot />
+  </div>
 </div>

package/dist/src/components/select/SelectItem.astro

@@ -4,23 +4,23 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & {
-	/**
-	 * The value associated with this select item
-	 */
-	value: string;
-	/**
-	 * Whether this select item is disabled and cannot be selected
-	 */
-	disabled?: boolean;
+  /**
+   * The value associated with this select item
+   */
+  value: string;
+  /**
+   * Whether this select item is disabled and cannot be selected
+   */
+  disabled?: boolean;
 };
 
 const selectItem = tv({
-	base: [
-		"relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 outline-none select-none",
-		"focus:bg-accent focus:text-accent-foreground",
-		"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		"not-aria-selected:[&_svg]:hidden aria-selected:[&_svg]:flex",
-	],
+  base: [
+    "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 outline-none select-none",
+    "focus:bg-accent focus:text-accent-foreground",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "not-aria-selected:[&_svg]:hidden aria-selected:[&_svg]:flex",
+  ],
 });
 
 const selectItemIcon = tv({ base: "absolute left-2 size-3.5 items-center justify-center" });
@@ -29,18 +29,18 @@ const { class: className, value, disabled, ...rest } = Astro.props;
 ---
 
 <div
-	class={selectItem({ class: className })}
-	data-value={value}
-	data-disabled={disabled}
-	aria-selected="false"
-	role="option"
-	tabindex="0"
-	{...rest}
+  class={selectItem({ class: className })}
+  data-value={value}
+  data-disabled={disabled}
+  aria-selected="false"
+  role="option"
+  tabindex="0"
+  {...rest}
 >
-	<span class={selectItemIcon()}>
-		<Check class="size-4" />
-	</span>
-	<span>
-		<slot />
-	</span>
+  <span class={selectItemIcon()}>
+    <Check class="size-4" />
+  </span>
+  <span>
+    <slot />
+  </span>
 </div>

package/dist/src/components/select/SelectLabel.astro

@@ -10,5 +10,5 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <div class={selectLabel({ class: className })} {...rest}>
-	<slot />
+  <slot />
 </div>

package/dist/src/components/select/SelectTrigger.astro

@@ -4,42 +4,42 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
-	/**
-	 * The content to be rendered inside the select trigger
-	 */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	children: any;
-	/**
-	 * Whether the select field is required in a form context
-	 */
-	required?: boolean;
+  /**
+   * The content to be rendered inside the select trigger
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children: any;
+  /**
+   * Whether the select field is required in a form context
+   */
+  required?: boolean;
 };
 
 const selectTrigger = tv({
-	base: [
-		"starwind-select-trigger",
-		"border-input bg-background text-foreground ring-offset-background flex h-11 items-center justify-between rounded-md border px-3 py-2",
-		"focus:outline-outline focus:outline-2 focus:outline-offset-2",
-		"disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-	],
+  base: [
+    "starwind-select-trigger",
+    "border-input bg-background text-foreground ring-offset-background flex h-11 items-center justify-between rounded-md border px-3 py-2",
+    "focus:outline-outline focus:outline-2 focus:outline-offset-2",
+    "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+  ],
 });
 
 const { class: className, required = false, ...rest } = Astro.props;
 ---
 
 <button
-	class={selectTrigger({ class: className })}
-	type="button"
-	role="combobox"
-	aria-label="Select field"
-	aria-controls=""
-	aria-expanded="false"
-	aria-haspopup="listbox"
-	aria-autocomplete="none"
-	aria-required={required ? "true" : "false"}
-	data-state="closed"
-	{...rest}
+  class={selectTrigger({ class: className })}
+  type="button"
+  role="combobox"
+  aria-label="Select field"
+  aria-controls=""
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-autocomplete="none"
+  aria-required={required ? "true" : "false"}
+  data-state="closed"
+  {...rest}
 >
-	<slot />
-	<ChevronDown class="size-4 opacity-50" />
+  <slot />
+  <ChevronDown class="size-4 opacity-50" />
 </button>

package/dist/src/components/select/SelectTypes.ts

@@ -1,7 +1,7 @@
 export interface SelectChangeEvent extends CustomEvent {
-	detail: {
-		value: string;
-		selectId: string;
-		label: string;
-	};
+  detail: {
+    value: string;
+    selectId: string;
+    label: string;
+  };
 }

package/dist/src/components/select/SelectValue.astro

@@ -3,10 +3,10 @@ import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"span"> & {
-	/**
-	 * The text to display when no value is selected
-	 */
-	placeholder?: string;
+  /**
+   * The text to display when no value is selected
+   */
+  placeholder?: string;
 };
 
 const selectValue = tv({ base: "pointer-events-none" });
@@ -15,5 +15,5 @@ const { placeholder = "select", class: className, ...rest } = Astro.props;
 ---
 
 <span class={selectValue({ class: className })} {...rest}>
-	{placeholder}
+  {placeholder}
 </span>

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

@@ -8,23 +8,23 @@ import SelectTrigger from "./SelectTrigger.astro";
 import SelectValue from "./SelectValue.astro";
 
 export {
-	Select,
-	SelectTrigger,
-	SelectValue,
-	SelectContent,
-	SelectGroup,
-	SelectLabel,
-	SelectItem,
-	SelectSeparator,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 };
 
 export default {
-	Root: Select,
-	Trigger: SelectTrigger,
-	Value: SelectValue,
-	Content: SelectContent,
-	Group: SelectGroup,
-	Label: SelectLabel,
-	Item: SelectItem,
-	Separator: SelectSeparator,
+  Root: Select,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Content: SelectContent,
+  Group: SelectGroup,
+  Label: SelectLabel,
+  Item: SelectItem,
+  Separator: SelectSeparator,
 };

package/dist/src/components/skeleton/Skeleton.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+
+const skeleton = tv({
+  base: "bg-accent animate-pulse rounded-md",
+});
+---
+
+<div class={skeleton({ class: className })} {...rest}></div>

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

@@ -0,0 +1,5 @@
+import Skeleton from "./Skeleton.astro";
+
+export { Skeleton };
+
+export default Skeleton;