@alexgorbatchev/shadcn 0.0.0-stage → 0.0.16

package/dist/menu/types.d.ts

@@ -0,0 +1,14 @@
+import type { Menu } from "@base-ui/react/menu";
+import type { IDensityProps } from "../density/types.js";
+interface IMenuInsetProps extends IDensityProps {
+    inset?: boolean;
+}
+interface IMenuItemOptions extends IMenuInsetProps {
+    variant?: "default" | "destructive";
+}
+export type MenuLabelProps = Menu.GroupLabel.Props & IMenuInsetProps;
+export type MenuItemProps = Menu.Item.Props & IMenuItemOptions;
+export type MenuSubTriggerProps = Menu.SubmenuTrigger.Props & IMenuInsetProps;
+export type MenuCheckboxItemProps = Menu.CheckboxItem.Props & IMenuInsetProps;
+export type MenuRadioItemProps = Menu.RadioItem.Props & IMenuInsetProps;
+export {};

package/dist/message/MessageContext.d.ts

@@ -0,0 +1,2 @@
+import type { IMessageContextValue } from "./types.js";
+export declare const MessageContext: import("react").Context<IMessageContextValue | null>;

package/dist/message/types.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from "react";
+export interface IMessageContextValue {
+    setFooterOffset: (offset: number) => void;
+}
+export type MessageStyle = CSSProperties & {
+    "--message-footer-offset": string;
+};

package/dist/options/types.d.ts

@@ -0,0 +1,5 @@
+/** Stable identity and human name for a selectable item. */
+export interface INamedOption {
+    id: string;
+    name: string;
+}

package/dist/portal/PortalContext.d.ts

@@ -0,0 +1 @@
+export declare const PortalContext: import("react").Context<HTMLElement | ShadowRoot | import("react").RefObject<HTMLElement | ShadowRoot | null> | null | undefined>;

package/dist/portal/types.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "react";
+import { Popover } from "@base-ui/react/popover";
+export type PortalContainer = ComponentProps<typeof Popover.Portal>["container"];

package/dist/sidebar/SidebarContext.d.ts

@@ -0,0 +1,2 @@
+import type { SidebarContextProps } from "./types.js";
+export declare const SidebarContext: import("react").Context<SidebarContextProps | null>;

package/dist/sidebar/types.d.ts

@@ -0,0 +1,32 @@
+import type { CSSProperties, Dispatch, SetStateAction } from "react";
+import type { IDensityProps } from "../density/types.js";
+export type SidebarPartState = IDensityProps & {
+    slot: string;
+    sidebar: string;
+};
+export type SidebarMenuButtonState = SidebarPartState & {
+    active: boolean;
+    size: "default" | "sm" | "lg" | null;
+};
+export type SidebarMenuSubButtonState = SidebarPartState & {
+    active: boolean;
+    size: "sm" | "md";
+};
+export type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    openMobile: boolean;
+    setOpenMobile: Dispatch<SetStateAction<boolean>>;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+    mobileWidth: string;
+};
+export interface SidebarStyle extends CSSProperties {
+    "--sidebar-width"?: string;
+    "--sidebar-width-mobile"?: string;
+    "--sidebar-width-icon"?: string;
+}
+export interface SidebarSkeletonStyle extends CSSProperties {
+    "--skeleton-width": string;
+}

package/dist/theme/ThemeContext.d.ts

@@ -0,0 +1,2 @@
+import type { IThemeContextValue } from "./types.js";
+export declare const ThemeContext: import("react").Context<IThemeContextValue | null>;

package/dist/theme/types.d.ts

@@ -0,0 +1,8 @@
+import type { TernaryDarkMode } from "usehooks-ts";
+export type ThemeMode = TernaryDarkMode;
+export type ResolvedTheme = "light" | "dark";
+export interface IThemeContextValue {
+    theme: ThemeMode;
+    resolvedTheme: ResolvedTheme;
+    setTheme: (theme: ThemeMode) => void;
+}

package/dist/theme.css

@@ -0,0 +1,454 @@
+@import "tw-animate-css";
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-faint-foreground: var(--faint-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-soft: var(--destructive-soft);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-frame-edge: var(--frame-edge);
+  --color-frame-halo: var(--frame-halo);
+  --color-backdrop: var(--backdrop);
+  --color-terminal-background: var(--terminal-background);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: var(--ag-font);
+  --font-mono: var(--ag-font);
+  --text-xs: var(--ag-text-xs);
+  --text-sm: var(--ag-control-text);
+  --text-base: var(--ag-text);
+  --text-lg: var(--ag-heading);
+  --radius-xs: 2px;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 4px;
+  --radius-xl: 4px;
+  --spacing-control: var(--ag-control-h);
+  --spacing-control-xs: calc(var(--ag-control-h) - 4px);
+  --spacing-control-sm: calc(var(--ag-control-h) - 2px);
+  --spacing-control-lg: calc(var(--ag-control-h) + 4px);
+  --spacing-control-x: var(--ag-control-x);
+  --spacing-control-gap: var(--ag-control-gap);
+  --spacing-tag: var(--ag-tag-h);
+  --spacing-tag-x: var(--ag-tag-x);
+  --spacing-panel: var(--ag-panel-padding);
+  --spacing-field-gap: var(--ag-field-gap);
+  --shadow-frame: 0 0 0 1px var(--frame-halo), var(--ag-shadow);
+}
+
+@layer base {
+  :root {
+    --ag-font: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --radius: 4px;
+    --sidebar: var(--background);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--accent);
+    --sidebar-accent-foreground: var(--accent-foreground);
+    --sidebar-border: var(--border);
+    --sidebar-ring: var(--ring);
+    --ag-text-xs: 11px;
+    --ag-control-text: 12px;
+    --ag-text: 14px;
+    --ag-heading: 18px;
+    --ag-leading: 1.65;
+    --ag-control-h: 28px;
+    --ag-control-x: 10px;
+    --ag-control-gap: 6px;
+    --ag-tag-h: 18px;
+    --ag-tag-x: 5px;
+    --ag-panel-padding: 16px;
+    --ag-panel-padding-sm: 12px;
+    --ag-field-gap: 20px;
+    color-scheme: dark;
+    --background: #121417;
+    --foreground: #eceff3;
+    --card: #121417;
+    --card-foreground: #eceff3;
+    --popover: #121417;
+    --popover-foreground: #eceff3;
+    --primary: #ff5cd6;
+    --primary-foreground: #1a0014;
+    --secondary: #1c1f24;
+    --secondary-foreground: #eceff3;
+    --muted: #282c33;
+    --muted-foreground: #a3abb6;
+    --faint-foreground: #929ba7;
+    --accent: #282c33;
+    --accent-foreground: #eceff3;
+    --destructive: #ff6159;
+    --destructive-foreground: #1f0000;
+    --destructive-soft: rgb(255 97 89 / 0.16);
+    --success: #3ddc84;
+    --success-foreground: #00210f;
+    --warning: #ffb224;
+    --warning-foreground: #231500;
+    --border: #353b44;
+    --input: #6f7783;
+    --ring: #ff5cd6;
+    --frame-edge: rgb(255 255 255 / 0.24);
+    --frame-halo: rgb(0 0 0 / 0.92);
+    --backdrop: rgb(4 5 7 / 0.7);
+    --terminal-background: #0b0c0f;
+    --ag-shadow: 0 6px 22px rgb(0 0 0 / 0.5);
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+    --background: #121417;
+    --foreground: #eceff3;
+    --card: #121417;
+    --card-foreground: #eceff3;
+    --popover: #121417;
+    --popover-foreground: #eceff3;
+    --primary: #ff5cd6;
+    --primary-foreground: #1a0014;
+    --secondary: #1c1f24;
+    --secondary-foreground: #eceff3;
+    --muted: #282c33;
+    --muted-foreground: #a3abb6;
+    --faint-foreground: #929ba7;
+    --accent: #282c33;
+    --accent-foreground: #eceff3;
+    --destructive: #ff6159;
+    --destructive-foreground: #1f0000;
+    --destructive-soft: rgb(255 97 89 / 0.16);
+    --success: #3ddc84;
+    --success-foreground: #00210f;
+    --warning: #ffb224;
+    --warning-foreground: #231500;
+    --border: #353b44;
+    --input: #6f7783;
+    --ring: #ff5cd6;
+    --frame-edge: rgb(255 255 255 / 0.24);
+    --frame-halo: rgb(0 0 0 / 0.92);
+    --backdrop: rgb(4 5 7 / 0.7);
+    --terminal-background: #0b0c0f;
+    --ag-shadow: 0 6px 22px rgb(0 0 0 / 0.5);
+  }
+
+  [data-theme="light"] {
+    color-scheme: light;
+    --background: #fcfcfd;
+    --foreground: #0c0e11;
+    --card: #fcfcfd;
+    --card-foreground: #0c0e11;
+    --popover: #fcfcfd;
+    --popover-foreground: #0c0e11;
+    --primary: #b8168c;
+    --primary-foreground: #ffffff;
+    --secondary: #eef0f3;
+    --secondary-foreground: #0c0e11;
+    --muted: #e0e4ea;
+    --muted-foreground: #4b535e;
+    --faint-foreground: #5b6470;
+    --accent: #e0e4ea;
+    --accent-foreground: #0c0e11;
+    --destructive: #cc1f1f;
+    --destructive-foreground: #ffffff;
+    --destructive-soft: rgb(204 31 31 / 0.1);
+    --success: #0a7d40;
+    --success-foreground: #ffffff;
+    --warning: #a35400;
+    --warning-foreground: #ffffff;
+    --border: #c7ccd4;
+    --input: #747c88;
+    --ring: #b8168c;
+    --frame-edge: rgb(0 0 0 / 0.42);
+    --frame-halo: rgb(255 255 255 / 0.95);
+    --backdrop: rgb(10 12 16 / 0.55);
+    --terminal-background: #ffffff;
+    --ag-shadow: 0 6px 22px rgb(0 0 0 / 0.3);
+  }
+
+  [data-density="comfortable"] {
+    --ag-text: 14px;
+    --ag-heading: 18px;
+    --ag-leading: 1.65;
+    --ag-control-h: 28px;
+    --ag-control-x: 10px;
+    --ag-control-gap: 6px;
+    --ag-tag-h: 18px;
+    --ag-tag-x: 5px;
+    --ag-panel-padding: 16px;
+    --ag-panel-padding-sm: 12px;
+    --ag-field-gap: 20px;
+  }
+
+  [data-density="compact"] {
+    --ag-text: 12px;
+    --ag-heading: 13px;
+    --ag-leading: 1.35;
+    --ag-control-h: 20px;
+    --ag-control-x: 6px;
+    --ag-control-gap: 4px;
+    --ag-tag-h: 16px;
+    --ag-tag-x: 4px;
+    --ag-panel-padding: 8px;
+    --ag-panel-padding-sm: 6px;
+    --ag-field-gap: 8px;
+  }
+
+  * {
+    @apply border-border;
+  }
+  body {
+    position: relative;
+    @apply bg-background text-foreground font-sans text-base;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0s !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+@utility no-scrollbar {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@property --scroll-fade-s {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-e {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-mask {
+  syntax: "*";
+  inherits: false;
+}
+
+@theme inline {
+  @keyframes scroll-fade-reveal-s {
+    from {
+      --scroll-fade-s: 0px;
+    }
+    to {
+      --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+  }
+  @keyframes scroll-fade-reveal-e {
+    from {
+      --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+    to {
+      --scroll-fade-e: 0px;
+    }
+  }
+}
+
+@utility scroll-fade-x {
+  --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+  --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+  --scroll-fade-inline: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  &:dir(rtl) {
+    --scroll-fade-inline: linear-gradient(
+      to left,
+      transparent 0,
+      #000 var(--scroll-fade-s, 0px),
+      #000 calc(100% - var(--scroll-fade-e, 0px)),
+      transparent 100%
+    );
+  }
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-s 1ms ease-in-out,
+      scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self inline), scroll(self inline);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@property --shimmer-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 20deg;
+}
+@property --shimmer-image {
+  syntax: "*";
+  inherits: false;
+}
+@property --shimmer-text-fill {
+  syntax: "*";
+  inherits: false;
+}
+
+@theme inline {
+  @keyframes tw-shimmer {
+    from {
+      background-position: 100% 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+}
+
+@utility shimmer {
+  --_spread: var(--shimmer-spread, calc(3ch + 40px));
+  --_base: currentColor;
+  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* 0.2)));
+
+  background-image: var(
+    --shimmer-image,
+    linear-gradient(
+      calc(90deg + var(--shimmer-angle)),
+      var(--_base) calc(50% - var(--_spread)),
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5),
+      var(--_highlight) 50%,
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5),
+      var(--_base) calc(50% + var(--_spread))
+    )
+  );
+  background-repeat: no-repeat;
+  background-size: calc(200% + var(--_spread) * 2) 100%;
+  background-position: 0 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
+  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+
+  &:dir(rtl) {
+    animation-direction: reverse;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+@utility shimmer-once {
+  animation-iteration-count: 1;
+}
+
+@utility shimmer-reverse {
+  animation-direction: reverse;
+}
+
+@utility shimmer-none {
+  --shimmer-image: none;
+  --shimmer-text-fill: currentColor;
+}
+
+@utility shimmer-color-* {
+  --shimmer-color: --value(--color, [color]);
+  --shimmer-color: color-mix(in oklch, --value(--color, [color]) calc(--modifier(integer) * 1%), transparent);
+}
+
+@utility shimmer-duration-* {
+  --shimmer-duration: calc(--value(integer) * 1ms);
+}
+
+@utility shimmer-spread-* {
+  --shimmer-spread: calc(var(--spacing) * --value(integer));
+  --shimmer-spread: --value([length], [percentage]);
+}
+
+@utility shimmer-angle-* {
+  --shimmer-angle: calc(--value(integer) * 1deg);
+}
+
+@property --scroll-fade-b {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@theme inline {
+  @keyframes scroll-fade-reveal-b {
+    from {
+      --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+    to {
+      --scroll-fade-b: 0px;
+    }
+  }
+}
+
+@utility scroll-fade-b {
+  --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+  --scroll-fade-mask: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--scroll-fade-b, 0px)), transparent 100%);
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y);
+    animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}

package/dist/toggle-group/ToggleGroupContext.d.ts

@@ -0,0 +1,2 @@
+import type { IToggleGroupContext } from "./types.js";
+export declare const ToggleGroupContext: import("react").Context<IToggleGroupContext>;

package/dist/toggle-group/types.d.ts

@@ -0,0 +1,5 @@
+import type { VariantProps } from "class-variance-authority";
+import type { toggleVariants } from "../components/Toggle.js";
+export interface IToggleGroupContext extends VariantProps<typeof toggleVariants> {
+    spacing: number;
+}