@tulip-systems/core 0.9.0 → 0.10.1

package/src/modules/inline/components/inputs/editor.client.tsx

@@ -16,14 +16,19 @@ import { type InlineEditVariantsProps, inlineEditVariants } from "../../lib/vari
 
 type EditorInlineTrigger = "change" | "blur";
 
+type InlineEditorSchema =
+  | z.ZodType<EditorJSONContent | null, EditorJSONContent | null>
+  | z.ZodType<EditorJSONContent, EditorJSONContent>;
+
 export type InlineEditorProps<
+  TSchema extends InlineEditorSchema = z.ZodType<EditorJSONContent | null, EditorJSONContent | null>,
   TData = unknown,
   TError = DefaultError,
   TVariables = unknown,
   TOnMutateResult = unknown,
 > = useInlineEditOptions<
   EditorInlineTrigger,
-  z.ZodType<EditorJSONContent | null, EditorJSONContent | null>,
+  TSchema,
   TData,
   TError,
   TVariables,
@@ -33,6 +38,7 @@ export type InlineEditorProps<
   Omit<EditorProps, "value" | "onUpdate" | "onBlur" | "variant">;
 
 export function InlineEditor<
+  TSchema extends InlineEditorSchema = z.ZodType<EditorJSONContent | null, EditorJSONContent | null>,
   TData = unknown,
   TError = DefaultError,
   TVariables = unknown,
@@ -48,11 +54,11 @@ export function InlineEditor<
   strategy,
   className,
   children,
-}: InlineEditorProps<TData, TError, TVariables, TOnMutateResult>) {
+}: InlineEditorProps<TSchema, TData, TError, TVariables, TOnMutateResult>) {
   const state = useInlineState<EditorJSONContent | null>(initialValue);
   const access = useInlineAccess({ permission, disabled });
   const mutations = useInlineMutation<
-    z.ZodType<EditorJSONContent | null, EditorJSONContent | null>,
+    TSchema,
     EditorJSONContent | null,
     TData,
     TError,
@@ -67,7 +73,7 @@ export function InlineEditor<
 
   const { handleTrigger } = useInlineStrategy<
     EditorInlineTrigger,
-    z.ZodType<EditorJSONContent | null, EditorJSONContent | null>,
+    TSchema,
     EditorJSONContent | null
   >({
     strategy,
@@ -75,7 +81,7 @@ export function InlineEditor<
     mutations,
     parser: {
       decode: (content) => content,
-      encode: (content) => content,
+      encode: (content) => content as z.input<TSchema>,
     },
   });
 

package/src/modules/inline/components/inputs/input.client.tsx

@@ -16,6 +16,14 @@ import { type InlineEditVariantsProps, inlineEditVariants } from "../../lib/vari
 
 type InputInlineTrigger = "change" | "blur";
 
+type InlineStringSchema =
+  | z.ZodType<string | null, string | null>
+  | z.ZodType<string, string>;
+
+type InlineNumberSchema =
+  | z.ZodType<number | null, number | null>
+  | z.ZodType<number, number>;
+
 type InlineEditInputProps<
   TSchema extends z.ZodType,
   TData = unknown,
@@ -30,7 +38,7 @@ type InlineEditInputProps<
  * The inline edit string input component.
  */
 export function InlineStringInput<
-  TSchema extends z.ZodType<string | null, string | null>,
+  TSchema extends InlineStringSchema = z.ZodType<string | null, string | null>,
   TData = unknown,
   TError = DefaultError,
   TVariables = unknown,
@@ -98,6 +106,7 @@ const parseValueAsNumber = (valueAsNumber: number): number | null =>
   !Number.isNaN(Number(valueAsNumber)) ? valueAsNumber : null;
 
 export function InlineNumberInput<
+  TSchema extends InlineNumberSchema = z.ZodType<number | null, number | null>,
   TData = unknown,
   TError = DefaultError,
   TVariables = unknown,
@@ -113,7 +122,7 @@ export function InlineNumberInput<
   disabled,
   ...props
 }: InlineEditInputProps<
-  z.ZodNumber | z.ZodNullable<z.ZodNumber>,
+  TSchema,
   TData,
   TError,
   TVariables,
@@ -122,7 +131,7 @@ export function InlineNumberInput<
   const state = useInlineState<number | null>(initialValue);
   const access = useInlineAccess({ permission, disabled });
   const mutations = useInlineMutation<
-    z.ZodNumber | z.ZodNullable<z.ZodNumber>,
+    TSchema,
     number | null,
     TData,
     TError,
@@ -137,7 +146,7 @@ export function InlineNumberInput<
 
   const { handleTrigger } = useInlineStrategy<
     InputInlineTrigger,
-    z.ZodNumber | z.ZodNullable<z.ZodNumber>,
+    TSchema,
     number | null
   >({
     strategy,
@@ -145,7 +154,7 @@ export function InlineNumberInput<
     mutations,
     parser: {
       decode: (value) => value,
-      encode: (value) => value,
+      encode: (value) => value as z.input<TSchema>,
     },
   });
 
@@ -172,6 +181,9 @@ export function InlineNumberInput<
  * The inline edit decimal input component.
  */
 export function InlineDecimalInput<
+  TSchema extends
+    | z.ZodType<string | null, string | null>
+    | z.ZodType<string, string> = z.ZodType<string | null, string | null>,
   TData = unknown,
   TError = DefaultError,
   TVariables = unknown,
@@ -187,7 +199,7 @@ export function InlineDecimalInput<
   disabled,
   ...props
 }: InlineEditInputProps<
-  z.ZodString | z.ZodNullable<z.ZodString>,
+  TSchema,
   TData,
   TError,
   TVariables,
@@ -196,7 +208,7 @@ export function InlineDecimalInput<
   const state = useInlineState<string | null>(initialValue);
   const access = useInlineAccess({ permission, disabled });
   const mutations = useInlineMutation<
-    z.ZodString | z.ZodNullable<z.ZodString>,
+    TSchema,
     string | null,
     TData,
     TError,
@@ -211,7 +223,7 @@ export function InlineDecimalInput<
 
   const { handleTrigger } = useInlineStrategy<
     InputInlineTrigger,
-    z.ZodString | z.ZodNullable<z.ZodString>,
+    TSchema,
     string | null
   >({
     strategy,
@@ -219,7 +231,7 @@ export function InlineDecimalInput<
     mutations,
     parser: {
       decode: (value) => value,
-      encode: (value) => value,
+      encode: (value) => value as z.input<TSchema>,
     },
   });
 

package/src/modules/inline/components/inputs/select.client.tsx

@@ -23,7 +23,12 @@ import { type InlineEditVariantsProps, inlineEditVariants } from "../../lib/vari
 
 type SelectInlineTrigger = "commit";
 
+type InlineStringSchema =
+  | z.ZodType<string | null, string | null>
+  | z.ZodType<string, string>;
+
 type InlineSelectProps<
+  TSchema extends InlineStringSchema = z.ZodType<string | null, string | null>,
   TData = unknown,
   TError = DefaultError,
   TVariables = unknown,
@@ -31,7 +36,7 @@ type InlineSelectProps<
 > = Omit<ComponentProps<typeof Select>, "value" | "defaultValue"> &
   useInlineEditOptions<
     SelectInlineTrigger,
-    z.ZodString | z.ZodNullable<z.ZodString>,
+    TSchema,
     TData,
     TError,
     TVariables,
@@ -39,6 +44,7 @@ type InlineSelectProps<
   >;
 
 export function InlineSelect<
+  TSchema extends InlineStringSchema = z.ZodType<string | null, string | null>,
   TData = unknown,
   TError = DefaultError,
   TVariables = unknown,
@@ -52,11 +58,11 @@ export function InlineSelect<
   disabled,
   onValueChange,
   ...props
-}: InlineSelectProps<TData, TError, TVariables, TOnMutateResult>) {
+}: InlineSelectProps<TSchema, TData, TError, TVariables, TOnMutateResult>) {
   const state = useInlineState<string | null>(initialValue);
   const access = useInlineAccess({ permission, disabled });
   const mutations = useInlineMutation<
-    z.ZodString | z.ZodNullable<z.ZodString>,
+    TSchema,
     string | null,
     TData,
     TError,
@@ -71,7 +77,7 @@ export function InlineSelect<
 
   const { handleTrigger } = useInlineStrategy<
     SelectInlineTrigger,
-    z.ZodString | z.ZodNullable<z.ZodString>,
+    TSchema,
     string | null
   >({
     strategy,
@@ -79,7 +85,7 @@ export function InlineSelect<
     mutations,
     parser: {
       decode: (value) => value,
-      encode: (value) => value,
+      encode: (value) => value as z.input<TSchema>,
     },
   });
 

package/src/modules/inline/components/inputs/switch.client.tsx

@@ -14,7 +14,12 @@ import {
 
 type SwitchInlineTrigger = "commit";
 
+type InlineBooleanSchema =
+  | z.ZodType<boolean | null, boolean | null>
+  | z.ZodType<boolean, boolean>;
+
 type InlineSwitchProps<
+  TSchema extends InlineBooleanSchema = z.ZodType<boolean | null, boolean | null>,
   TData = unknown,
   TError = DefaultError,
   TVariables = unknown,
@@ -22,7 +27,7 @@ type InlineSwitchProps<
 > = ComponentProps<typeof Switch> &
   useInlineEditOptions<
     SwitchInlineTrigger,
-    z.ZodBoolean | z.ZodNullable<z.ZodBoolean>,
+    TSchema,
     TData,
     TError,
     TVariables,
@@ -30,6 +35,7 @@ type InlineSwitchProps<
   >;
 
 export function InlineSwitch<
+  TSchema extends InlineBooleanSchema = z.ZodType<boolean | null, boolean | null>,
   TData = unknown,
   TError = DefaultError,
   TVariables = unknown,
@@ -42,11 +48,11 @@ export function InlineSwitch<
   strategy,
   disabled,
   ...props
-}: InlineSwitchProps<TData, TError, TVariables, TOnMutateResult>) {
+}: InlineSwitchProps<TSchema, TData, TError, TVariables, TOnMutateResult>) {
   const state = useInlineState<boolean | null>(initialValue);
   const access = useInlineAccess({ permission, disabled });
   const mutations = useInlineMutation<
-    z.ZodBoolean | z.ZodNullable<z.ZodBoolean>,
+    TSchema,
     boolean | null,
     TData,
     TError,
@@ -61,7 +67,7 @@ export function InlineSwitch<
 
   const { handleTrigger } = useInlineStrategy<
     SwitchInlineTrigger,
-    z.ZodBoolean | z.ZodNullable<z.ZodBoolean>,
+    TSchema,
     boolean | null
   >({
     strategy,
@@ -69,7 +75,7 @@ export function InlineSwitch<
     mutations,
     parser: {
       decode: (value) => value,
-      encode: (value) => value,
+      encode: (value) => value as z.input<TSchema>,
     },
   });
 

package/src/modules/router/entry.ts

@@ -1,4 +1,5 @@
 /**
  * Lib
  */
+export * from "./lib/query-client";
 export * from "./lib/validators";

package/src/modules/router/lib/query-client.ts

@@ -1,4 +1,4 @@
-import { isServer, MutationCache, QueryClient } from "@tanstack/react-query";
+import { environmentManager, MutationCache, QueryClient } from "@tanstack/react-query";
 import { serializer } from "./helpers";
 
 /**
@@ -47,7 +47,7 @@ export function createQueryClient() {
 let browserQueryClient: QueryClient;
 
 export function getQueryClient() {
-  if (isServer) {
+  if (environmentManager.isServer()) {
     // Server: always make a new query client
     return createQueryClient();
   }

package/src/styles.css

@@ -103,7 +103,7 @@
   --accent-foreground: oklch(0.37 0 0);
 
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
 
   --border: oklch(0.91 0 0);
   --input: oklch(0.91 0 0);
@@ -157,7 +157,7 @@
   --accent-foreground: oklch(0.87 0 0);
 
   --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --destructive-foreground: oklch(0.985 0 0);
 
   --border: oklch(0.27 0 0);
   --input: oklch(0.27 0 0);
@@ -182,6 +182,230 @@
   --sidebar-ring: oklch(0.47 0.14 37);
 }
 
+[data-theme="tulip"] {
+  --background: oklch(99.2% 0.004 84);
+  --card: oklch(99.4% 0.004 84);
+  --popover: oklch(99.4% 0.004 84);
+  --border: oklch(90.8% 0.006 84);
+  --input: oklch(90.8% 0.006 84);
+  --primary: oklch(81% 0.17 84);
+  --primary-foreground: oklch(30% 0.045 84);
+  --secondary: oklch(95% 0.025 84);
+  --secondary-foreground: oklch(34% 0.07 84);
+  --muted: oklch(96% 0.012 84);
+  --muted-foreground: oklch(46% 0.05 84);
+  --accent: oklch(93% 0.05 78);
+  --accent-foreground: oklch(31% 0.085 78);
+  --ring: oklch(76% 0.12 82);
+  --sidebar-primary: oklch(81% 0.17 84);
+  --sidebar-primary-foreground: oklch(30% 0.045 84);
+  --sidebar: oklch(98.8% 0.006 84);
+  --sidebar-accent: oklch(95.5% 0.014 84);
+  --sidebar-border: oklch(90.5% 0.008 84);
+  --sidebar-ring: oklch(76% 0.12 82);
+  --chart-1: oklch(85% 0.15 92);
+  --chart-2: oklch(81% 0.17 84);
+  --chart-3: oklch(73% 0.19 64);
+  --chart-4: oklch(66% 0.165 48);
+  --chart-5: oklch(77% 0.14 104);
+}
+
+.dark [data-theme="tulip"] {
+  --background: oklch(10.5% 0.004 84);
+  --card: oklch(11% 0.004 84);
+  --popover: oklch(11.5% 0.008 84);
+  --border: oklch(27% 0.006 84);
+  --input: oklch(27% 0.006 84);
+  --primary: oklch(82% 0.155 84);
+  --primary-foreground: oklch(20% 0.04 84);
+  --secondary: oklch(25% 0.012 84);
+  --secondary-foreground: oklch(88% 0.015 84);
+  --muted: oklch(23% 0.008 84);
+  --muted-foreground: oklch(78% 0.012 84);
+  --accent: oklch(27% 0.028 78);
+  --accent-foreground: oklch(88% 0.015 78);
+  --ring: oklch(62% 0.1 82);
+  --sidebar-primary: oklch(82% 0.155 84);
+  --sidebar-primary-foreground: oklch(20% 0.04 84);
+  --sidebar: oklch(15% 0.006 84);
+  --sidebar-accent: oklch(23% 0.01 84);
+  --sidebar-border: oklch(25% 0.006 84);
+  --sidebar-ring: oklch(62% 0.1 82);
+  --chart-1: oklch(83% 0.13 92);
+  --chart-2: oklch(78% 0.145 84);
+  --chart-3: oklch(71% 0.165 64);
+  --chart-4: oklch(64% 0.145 48);
+  --chart-5: oklch(74% 0.12 104);
+}
+
+[data-theme="rose"] {
+  --background: oklch(99.2% 0.005 18);
+  --card: oklch(99.4% 0.005 18);
+  --popover: oklch(99.4% 0.005 18);
+  --border: oklch(90.8% 0.008 18);
+  --input: oklch(90.8% 0.008 18);
+  --primary: oklch(62.5% 0.19 26);
+  --primary-foreground: oklch(14% 0.02 26);
+  --secondary: oklch(95% 0.022 18);
+  --secondary-foreground: oklch(34% 0.075 18);
+  --muted: oklch(96% 0.012 18);
+  --muted-foreground: oklch(46% 0.06 18);
+  --accent: oklch(93.5% 0.035 26);
+  --accent-foreground: oklch(31% 0.065 22);
+  --ring: oklch(62% 0.145 26);
+  --sidebar-primary: oklch(62.5% 0.19 26);
+  --sidebar-primary-foreground: oklch(14% 0.02 26);
+  --sidebar: oklch(98.8% 0.006 18);
+  --sidebar-accent: oklch(95.5% 0.013 18);
+  --sidebar-border: oklch(90.5% 0.009 18);
+  --sidebar-ring: oklch(62% 0.145 26);
+  --chart-1: oklch(79% 0.11 30);
+  --chart-2: oklch(72% 0.13 22);
+  --chart-3: oklch(62.5% 0.19 26);
+  --chart-4: oklch(57% 0.145 10);
+  --chart-5: oklch(70% 0.12 38);
+}
+
+.dark [data-theme="rose"] {
+  --background: oklch(10.5% 0.005 18);
+  --card: oklch(11% 0.005 18);
+  --popover: oklch(11.5% 0.01 18);
+  --border: oklch(27% 0.007 18);
+  --input: oklch(27% 0.007 18);
+  --primary: oklch(70% 0.17 26);
+  --primary-foreground: oklch(14% 0.02 26);
+  --secondary: oklch(24% 0.016 18);
+  --secondary-foreground: oklch(88% 0.018 18);
+  --muted: oklch(22% 0.009 18);
+  --muted-foreground: oklch(78% 0.018 18);
+  --accent: oklch(27% 0.03 28);
+  --accent-foreground: oklch(88% 0.018 28);
+  --ring: oklch(58% 0.12 26);
+  --sidebar-primary: oklch(70% 0.17 26);
+  --sidebar-primary-foreground: oklch(14% 0.02 26);
+  --sidebar: oklch(15% 0.007 18);
+  --sidebar-accent: oklch(23% 0.011 18);
+  --sidebar-border: oklch(25% 0.007 18);
+  --sidebar-ring: oklch(58% 0.12 26);
+  --chart-1: oklch(80% 0.1 30);
+  --chart-2: oklch(73% 0.12 22);
+  --chart-3: oklch(69% 0.17 26);
+  --chart-4: oklch(60% 0.12 10);
+  --chart-5: oklch(72% 0.1 38);
+}
+
+[data-theme="iris"] {
+  --background: oklch(99.2% 0.004 248);
+  --card: oklch(99.4% 0.004 248);
+  --popover: oklch(99.4% 0.004 248);
+  --border: oklch(90.8% 0.006 248);
+  --input: oklch(90.8% 0.006 248);
+  --primary: oklch(62% 0.145 246);
+  --primary-foreground: oklch(20% 0.04 246);
+  --secondary: oklch(95% 0.02 248);
+  --secondary-foreground: oklch(33% 0.065 246);
+  --muted: oklch(96% 0.011 248);
+  --muted-foreground: oklch(45% 0.05 246);
+  --accent: oklch(93.5% 0.03 268);
+  --accent-foreground: oklch(31% 0.07 266);
+  --ring: oklch(69% 0.1 246);
+  --sidebar-primary: oklch(62% 0.145 246);
+  --sidebar-primary-foreground: oklch(20% 0.04 246);
+  --sidebar: oklch(98.8% 0.006 248);
+  --sidebar-accent: oklch(95.5% 0.012 248);
+  --sidebar-border: oklch(90.5% 0.008 248);
+  --sidebar-ring: oklch(69% 0.1 246);
+  --chart-1: oklch(78% 0.09 268);
+  --chart-2: oklch(72% 0.11 246);
+  --chart-3: oklch(66% 0.13 228);
+  --chart-4: oklch(60% 0.11 286);
+  --chart-5: oklch(69% 0.08 216);
+}
+
+.dark [data-theme="iris"] {
+  --background: oklch(10.5% 0.004 248);
+  --card: oklch(11% 0.004 248);
+  --popover: oklch(11.5% 0.009 248);
+  --border: oklch(27% 0.006 248);
+  --input: oklch(27% 0.006 248);
+  --primary: oklch(72% 0.12 246);
+  --primary-foreground: oklch(19% 0.035 246);
+  --secondary: oklch(24% 0.013 248);
+  --secondary-foreground: oklch(88% 0.014 248);
+  --muted: oklch(22% 0.009 248);
+  --muted-foreground: oklch(78% 0.014 248);
+  --accent: oklch(26% 0.022 268);
+  --accent-foreground: oklch(88% 0.015 268);
+  --ring: oklch(58% 0.1 246);
+  --sidebar-primary: oklch(72% 0.12 246);
+  --sidebar-primary-foreground: oklch(19% 0.035 246);
+  --sidebar: oklch(15% 0.006 248);
+  --sidebar-accent: oklch(23% 0.01 248);
+  --sidebar-border: oklch(25% 0.006 248);
+  --sidebar-ring: oklch(58% 0.1 246);
+  --chart-1: oklch(79% 0.08 268);
+  --chart-2: oklch(73% 0.1 246);
+  --chart-3: oklch(67% 0.12 228);
+  --chart-4: oklch(61% 0.1 286);
+  --chart-5: oklch(70% 0.07 216);
+}
+
+[data-theme="sage"] {
+  --background: oklch(99.2% 0.004 145);
+  --card: oklch(99.4% 0.004 145);
+  --popover: oklch(99.4% 0.004 145);
+  --border: oklch(90.8% 0.006 145);
+  --input: oklch(90.8% 0.006 145);
+  --primary: oklch(69% 0.12 145);
+  --primary-foreground: oklch(18% 0.03 145);
+  --secondary: oklch(95% 0.018 145);
+  --secondary-foreground: oklch(33% 0.055 145);
+  --muted: oklch(96% 0.009 145);
+  --muted-foreground: oklch(45% 0.042 145);
+  --accent: oklch(93.5% 0.03 110);
+  --accent-foreground: oklch(30% 0.055 118);
+  --ring: oklch(73% 0.08 145);
+  --sidebar-primary: oklch(69% 0.12 145);
+  --sidebar-primary-foreground: oklch(18% 0.03 145);
+  --sidebar: oklch(98.8% 0.006 145);
+  --sidebar-accent: oklch(95.5% 0.012 145);
+  --sidebar-border: oklch(90.5% 0.008 145);
+  --sidebar-ring: oklch(73% 0.08 145);
+  --chart-1: oklch(82% 0.08 160);
+  --chart-2: oklch(76% 0.1 145);
+  --chart-3: oklch(69% 0.11 128);
+  --chart-4: oklch(63% 0.1 112);
+  --chart-5: oklch(77% 0.09 95);
+}
+
+.dark [data-theme="sage"] {
+  --background: oklch(10.5% 0.004 145);
+  --card: oklch(11% 0.004 145);
+  --popover: oklch(11.5% 0.009 145);
+  --border: oklch(27% 0.006 145);
+  --input: oklch(27% 0.006 145);
+  --primary: oklch(75% 0.11 145);
+  --primary-foreground: oklch(18% 0.03 145);
+  --secondary: oklch(26% 0.01 145);
+  --secondary-foreground: oklch(88% 0.014 145);
+  --muted: oklch(24% 0.007 145);
+  --muted-foreground: oklch(78% 0.014 145);
+  --accent: oklch(28% 0.018 112);
+  --accent-foreground: oklch(88% 0.014 112);
+  --ring: oklch(60% 0.08 145);
+  --sidebar-primary: oklch(75% 0.11 145);
+  --sidebar-primary-foreground: oklch(18% 0.03 145);
+  --sidebar: oklch(15% 0.006 145);
+  --sidebar-accent: oklch(23% 0.009 145);
+  --sidebar-border: oklch(25% 0.006 145);
+  --sidebar-ring: oklch(60% 0.08 145);
+  --chart-1: oklch(83% 0.07 160);
+  --chart-2: oklch(77% 0.09 145);
+  --chart-3: oklch(70% 0.1 128);
+  --chart-4: oklch(64% 0.09 112);
+  --chart-5: oklch(78% 0.08 95);
+}
+
 @layer base {
   * {
     @apply border-border;
@@ -190,3 +414,94 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* ejected from shadcn */
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto));
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto));
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/* Custom variants */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}