@atlure/ui 0.4.0 → 0.6.0

package/src/variants/checkbox-variants.ts

@@ -1,5 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
+export const checkboxBoxSize = 24;
+
 export const checkboxRowVariants = cva("flex-row items-center gap-sm", {
   variants: {
     isDisabled: {
@@ -14,7 +16,7 @@ export const checkboxRowVariants = cva("flex-row items-center gap-sm", {
 
 export const checkboxBoxVariants = cva("h-6 w-6 items-center justify-center rounded-sm border-2", {
   variants: {
-    isChecked: {
+    isSelected: {
       true: "border-primary bg-primary",
       false: "border-border/20 bg-input-background",
     },
@@ -24,23 +26,12 @@ export const checkboxBoxVariants = cva("h-6 w-6 items-center justify-center roun
     },
   },
   defaultVariants: {
-    isChecked: false,
+    isSelected: false,
     isInvalid: false,
   },
 });
 
-export const checkboxIndicatorVariants = cva("h-3 w-3 rounded-sm", {
-  variants: {
-    isChecked: {
-      true: "bg-primary-foreground",
-      false: "bg-transparent",
-    },
-  },
-  defaultVariants: {
-    isChecked: false,
-  },
-});
+export const checkboxIndicatorClassName = "text-primary-foreground";
 
 export type CheckboxRowVariantProps = VariantProps<typeof checkboxRowVariants>;
 export type CheckboxBoxVariantProps = VariantProps<typeof checkboxBoxVariants>;
-export type CheckboxIndicatorVariantProps = VariantProps<typeof checkboxIndicatorVariants>;

package/src/variants/chip-variants.ts

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const chipHeight = 32;
+
+export const chipVariants = cva("flex-row items-center self-start rounded-full border", {
+  variants: {
+    isSelected: {
+      true: "border-primary bg-primary",
+      false: "border-border/20 bg-transparent",
+    },
+    isDisabled: {
+      true: "opacity-50",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    isSelected: false,
+    isDisabled: false,
+  },
+});
+
+export const chipBodyClassName = "flex-row items-center px-md py-xs";
+export const chipDismissClassName = "flex-row items-center py-xs pl-xs pr-md";
+
+export const chipLabelVariants = cva("text-sm font-medium", {
+  variants: {
+    isSelected: {
+      true: "text-primary-foreground",
+      false: "text-foreground",
+    },
+  },
+  defaultVariants: {
+    isSelected: false,
+  },
+});
+
+export type ChipVariantProps = VariantProps<typeof chipVariants>;
+export type ChipLabelVariantProps = VariantProps<typeof chipLabelVariants>;

package/src/variants/dialog-variants.ts

@@ -0,0 +1,11 @@
+export const dialogOverlayClassName = "flex-1 items-center justify-center p-lg";
+
+export const dialogContentClassName = "w-full max-w-sm gap-md rounded-lg bg-card p-lg";
+
+export const dialogHeaderClassName = "gap-xs";
+
+export const dialogTitleClassName = "text-lg font-semibold text-foreground";
+
+export const dialogDescriptionClassName = "text-sm text-muted-foreground";
+
+export const dialogFooterClassName = "flex-row justify-end gap-sm";

package/src/variants/index.ts

@@ -3,9 +3,18 @@ export * from "./badge-variants";
 export * from "./button-variants";
 export * from "./card-variants";
 export * from "./checkbox-variants";
+export * from "./chip-variants";
 export * from "./input-variants";
 export * from "./label-variants";
+export * from "./radio-group-variants";
+export * from "./screen-header-variants";
+export * from "./segmented-control-variants";
 export * from "./separator-variants";
+export * from "./progress-variants";
+export * from "./settings-row-variants";
 export * from "./skeleton-variants";
+export * from "./slider-variants";
+export * from "./star-rating-variants";
 export * from "./switch-variants";
+export * from "./tabs-variants";
 export * from "./text-variants";

package/src/variants/overlay-variants.ts

@@ -0,0 +1 @@
+export const overlayBackdropClassName = "absolute inset-0 bg-foreground/40";

package/src/variants/progress-variants.ts

@@ -0,0 +1,18 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const progressTrackVariants = cva("w-full overflow-hidden rounded-full bg-muted", {
+  variants: {
+    size: {
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const progressFillClassName = "h-full rounded-full bg-primary";
+
+export type ProgressVariantProps = VariantProps<typeof progressTrackVariants>;

package/src/variants/radio-group-variants.ts

@@ -0,0 +1,48 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const radioGroupIndicatorSize = 24;
+
+export const radioGroupVariants = cva("flex-col gap-sm", {
+  variants: {
+    isDisabled: {
+      true: "opacity-50",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    isDisabled: false,
+  },
+});
+
+export const radioGroupItemVariants = cva("flex-row items-center gap-sm", {
+  variants: {
+    isDisabled: {
+      true: "opacity-50",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    isDisabled: false,
+  },
+});
+
+export const radioGroupIndicatorVariants = cva(
+  "h-6 w-6 items-center justify-center rounded-full border-2",
+  {
+    variants: {
+      isSelected: {
+        true: "border-primary",
+        false: "border-border/20 bg-input-background",
+      },
+    },
+    defaultVariants: {
+      isSelected: false,
+    },
+  },
+);
+
+export const radioGroupDotClassName = "h-3 w-3 rounded-full bg-primary";
+
+export type RadioGroupVariantProps = VariantProps<typeof radioGroupVariants>;
+export type RadioGroupItemVariantProps = VariantProps<typeof radioGroupItemVariants>;
+export type RadioGroupIndicatorVariantProps = VariantProps<typeof radioGroupIndicatorVariants>;

package/src/variants/screen-header-variants.ts

@@ -0,0 +1,33 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const screenHeaderVariants = cva("flex-row bg-background px-md", {
+  variants: {
+    variant: {
+      default: "items-center gap-sm py-sm",
+      large: "items-start gap-md py-lg",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export const screenHeaderTextClassName = "flex-1 flex-col gap-xs";
+export const screenHeaderActionsClassName = "flex-row items-center gap-xs";
+
+export const screenHeaderTitleVariants = cva("", {
+  variants: {
+    variant: {
+      default: "text-lg font-semibold text-foreground",
+      large: "text-2xl font-bold text-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export const screenHeaderSubtitleClassName = "text-sm font-normal text-muted-foreground";
+
+export type ScreenHeaderVariantProps = VariantProps<typeof screenHeaderVariants>;
+export type ScreenHeaderTitleVariantProps = VariantProps<typeof screenHeaderTitleVariants>;

package/src/variants/segmented-control-variants.ts

@@ -0,0 +1,41 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const segmentedControlClassName =
+  "flex-row items-center rounded-full border border-border/20 bg-muted p-xs";
+
+export const segmentedControlSegmentVariants = cva(
+  "flex-1 items-center justify-center rounded-full px-md py-sm",
+  {
+    variants: {
+      isSelected: {
+        true: "bg-background",
+        false: "bg-transparent",
+      },
+      isDisabled: {
+        true: "opacity-50",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      isSelected: false,
+      isDisabled: false,
+    },
+  },
+);
+
+export const segmentedControlLabelVariants = cva("text-sm", {
+  variants: {
+    isSelected: {
+      true: "font-semibold text-foreground",
+      false: "font-medium text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    isSelected: false,
+  },
+});
+
+export type SegmentedControlSegmentVariantProps = VariantProps<
+  typeof segmentedControlSegmentVariants
+>;
+export type SegmentedControlLabelVariantProps = VariantProps<typeof segmentedControlLabelVariants>;

package/src/variants/select-variants.ts

@@ -0,0 +1,48 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const selectTriggerClassName = "flex-row items-center justify-between gap-sm";
+
+export const selectValueVariants = cva("flex-1 text-base", {
+  variants: {
+    isPlaceholder: {
+      true: "text-muted-foreground",
+      false: "text-foreground",
+    },
+  },
+  defaultVariants: {
+    isPlaceholder: false,
+  },
+});
+
+export const selectItemVariants = cva(
+  "min-h-control-md flex-row items-center justify-between py-sm",
+  {
+    variants: {
+      isDisabled: {
+        true: "opacity-50",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      isDisabled: false,
+    },
+  },
+);
+
+export const selectItemLabelVariants = cva("flex-1 text-base", {
+  variants: {
+    isSelected: {
+      true: "font-semibold text-foreground",
+      false: "text-foreground",
+    },
+  },
+  defaultVariants: {
+    isSelected: false,
+  },
+});
+
+export const selectOptionListClassName = "flex-1";
+
+export type SelectValueVariantProps = VariantProps<typeof selectValueVariants>;
+export type SelectItemVariantProps = VariantProps<typeof selectItemVariants>;
+export type SelectItemLabelVariantProps = VariantProps<typeof selectItemLabelVariants>;

package/src/variants/settings-row-variants.ts

@@ -0,0 +1,18 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const settingsRowVariants = cva("flex-row items-center gap-md py-sm", {
+  variants: {
+    isDisabled: {
+      true: "opacity-50",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    isDisabled: false,
+  },
+});
+
+export const settingsRowTextClassName = "flex-1 flex-col gap-xs";
+export const settingsRowControlClassName = "shrink-0";
+
+export type SettingsRowVariantProps = VariantProps<typeof settingsRowVariants>;

package/src/variants/sheet-variants.ts

@@ -0,0 +1,10 @@
+import { overlayBackdropClassName } from "./overlay-variants";
+
+export const sheetContainerClassName = "flex-1 justify-end";
+
+export const sheetBackdropClassName = overlayBackdropClassName;
+
+export const sheetContentClassName = "w-full overflow-hidden rounded-t-xl bg-card px-md";
+
+export const sheetHandleClassName =
+  "my-sm h-1 w-12 self-center rounded-full bg-muted-foreground/40";

package/src/variants/slider-variants.ts

@@ -0,0 +1,8 @@
+export const sliderContainerClassName = "w-full justify-center py-2";
+export const sliderTrackClassName = "h-2 w-full overflow-hidden rounded-full bg-muted";
+export const sliderFillClassName = "absolute h-2 rounded-full bg-primary";
+export const sliderThumbClassName =
+  "absolute h-6 w-6 -ml-3 rounded-full border-2 border-primary bg-background";
+export const sliderLabelClassName = "mt-2 text-sm text-foreground";
+
+export const SLIDER_THUMB_SIZE = 24;

package/src/variants/star-rating-variants.ts

@@ -0,0 +1,28 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const starRatingIconSize = {
+  sm: 12,
+  md: 16,
+  lg: 24,
+} as const;
+
+export type StarRatingSize = keyof typeof starRatingIconSize;
+
+export const starRatingClassName = "flex-row items-center gap-xs";
+export const starRatingFilledClassName = "text-warning";
+export const starRatingEmptyClassName = "text-muted-foreground";
+
+export const starRatingValueVariants = cva("font-medium text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export type StarRatingValueVariantProps = VariantProps<typeof starRatingValueVariants>;

package/src/variants/switch-variants.ts

@@ -1,10 +1,26 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
-export const switchTrackVariants = cva("h-7 w-12 flex-row items-center rounded-full p-xs", {
+export const switchTrackHeight = {
+  sm: 24,
+  md: 28,
+} as const;
+
+export const switchThumbTravel = {
+  sm: 16,
+  md: 20,
+} as const;
+
+export type SwitchSize = keyof typeof switchTrackHeight;
+
+export const switchTrackVariants = cva("flex-row items-center rounded-full p-xs", {
   variants: {
+    size: {
+      sm: "h-6 w-10",
+      md: "h-7 w-12",
+    },
     isChecked: {
-      true: "justify-end bg-primary",
-      false: "justify-start bg-muted",
+      true: "bg-primary",
+      false: "bg-muted",
     },
     isDisabled: {
       true: "opacity-50",
@@ -12,19 +28,25 @@ export const switchTrackVariants = cva("h-7 w-12 flex-row items-center rounded-f
     },
   },
   defaultVariants: {
+    size: "md",
     isChecked: false,
     isDisabled: false,
   },
 });
 
-export const switchThumbVariants = cva("h-5 w-5 rounded-full", {
+export const switchThumbVariants = cva("rounded-full", {
   variants: {
+    size: {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+    },
     isChecked: {
       true: "bg-primary-foreground",
       false: "bg-background",
     },
   },
   defaultVariants: {
+    size: "md",
     isChecked: false,
   },
 });

package/src/variants/tabs-variants.ts

@@ -0,0 +1,46 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const tabsIndicatorHeight = 2;
+
+export const tabsListClassName = "relative flex-row items-end border-b border-border/20";
+export const tabsIndicatorClassName = "h-full w-full rounded-full bg-primary";
+
+export const tabsTriggerVariants = cva("items-center justify-center px-md py-sm", {
+  variants: {
+    isDisabled: {
+      true: "opacity-50",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    isDisabled: false,
+  },
+});
+
+export const tabsTriggerLabelVariants = cva("text-sm", {
+  variants: {
+    isActive: {
+      true: "font-semibold text-primary",
+      false: "font-medium text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    isActive: false,
+  },
+});
+
+export const tabsContentVariants = cva("flex-1", {
+  variants: {
+    isActive: {
+      true: "",
+      false: "hidden",
+    },
+  },
+  defaultVariants: {
+    isActive: true,
+  },
+});
+
+export type TabsTriggerVariantProps = VariantProps<typeof tabsTriggerVariants>;
+export type TabsTriggerLabelVariantProps = VariantProps<typeof tabsTriggerLabelVariants>;
+export type TabsContentVariantProps = VariantProps<typeof tabsContentVariants>;

package/src/variants/toast-variants.ts

@@ -0,0 +1,31 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const toastViewportClassName = "absolute inset-x-0 bottom-0 px-md";
+
+export const toastVariants = cva("w-full flex-row items-center gap-sm rounded-lg p-md", {
+  variants: {
+    variant: {
+      default: "bg-card",
+      success: "bg-success",
+      error: "bg-destructive",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export const toastMessageVariants = cva("flex-1 text-base", {
+  variants: {
+    variant: {
+      default: "text-foreground",
+      success: "text-success-foreground",
+      error: "text-destructive-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export type ToastVariantProps = VariantProps<typeof toastVariants>;