@mks2508/mks-ui 0.1.4 → 0.2.0

package/dist/react/ui/Progress/Progress.types.d.ts

@@ -0,0 +1,148 @@
+/**
+ * Type definitions for the Progress component.
+ *
+ * @module @mks2508/mks-ui/react/ui/Progress/Progress.types
+ */
+import type { Progress as ProgressPrimitives } from '@base-ui/react/progress';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+import type { ICountingNumberProps } from '../../../react/primitives/CountingNumber';
+/**
+ * Available style slot names for the Progress component.
+ * Each slot maps to a visual region that can be customized via the `slots` prop.
+ *
+ * - `root` - The outer progress container
+ * - `track` - The background track bar
+ * - `indicator` - The filled indicator bar that animates to the current value
+ * - `label` - Optional label text (e.g., "Uploading...")
+ * - `value` - Optional animated numeric value display
+ *
+ * @example
+ * ```tsx
+ * <Progress
+ *   value={75}
+ *   slots={{
+ *     root: 'w-full',
+ *     track: 'h-3 bg-zinc-800 rounded-full',
+ *     indicator: 'bg-cyan-500 rounded-full',
+ *     label: 'text-sm text-zinc-400',
+ *     value: 'text-sm font-mono',
+ *   }}
+ * />
+ * ```
+ */
+export type ProgressSlot = 'root' | 'track' | 'indicator' | 'label' | 'value';
+/**
+ * Internal context type for Progress state management.
+ * Shared between the Progress root and its child components via React context.
+ */
+export type ProgressContextType = {
+    /** Current progress value (0-100). */
+    value: number;
+};
+/**
+ * Configuration options for Progress behavior and animation.
+ * Extends the base config with progress-specific settings.
+ *
+ * @example
+ * ```tsx
+ * <Progress
+ *   value={75}
+ *   config={{ animation: { duration: 0.5 }, springStiffness: 120 }}
+ * />
+ * ```
+ */
+export interface IProgressConfig extends IBaseConfig {
+    /**
+     * Spring stiffness for the indicator animation.
+     * @defaultValue 100
+     */
+    springStiffness?: number;
+    /**
+     * Spring damping for the indicator animation.
+     * @defaultValue 30
+     */
+    springDamping?: number;
+}
+/**
+ * Props for the Progress root component.
+ * Wraps Base UI Progress.Root with context provider, slot overrides, and configuration.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={75} slots={{ root: 'flex flex-col gap-2' }}>
+ *   <ProgressLabel>Uploading...</ProgressLabel>
+ *   <ProgressTrack>
+ *     <ProgressIndicator />
+ *   </ProgressTrack>
+ *   <ProgressValue />
+ * </Progress>
+ * ```
+ */
+export type IProgressProps = React.ComponentProps<typeof ProgressPrimitives.Root> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<ProgressSlot>;
+    /** Behavioral and animation configuration. */
+    config?: IProgressConfig;
+};
+/**
+ * Props for the ProgressIndicator sub-component.
+ * Uses `motion.create` for spring-animated width transitions.
+ *
+ * @example
+ * ```tsx
+ * <ProgressIndicator className="h-full rounded-full" />
+ * ```
+ */
+export type IProgressIndicatorProps = React.ComponentProps<typeof ProgressPrimitives.Indicator> & React.ComponentProps<'div'> & {
+    /** Spring transition config for the indicator animation. */
+    transition?: {
+        type?: 'spring' | 'tween' | 'keyframes' | 'decay' | 'inertia';
+        stiffness?: number;
+        damping?: number;
+        [key: string]: unknown;
+    };
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<ProgressSlot>;
+};
+/**
+ * Props for the ProgressTrack sub-component.
+ * Wraps Base UI Progress.Track with slot overrides.
+ *
+ * @example
+ * ```tsx
+ * <ProgressTrack className="h-2 rounded-full overflow-hidden">
+ *   <ProgressIndicator />
+ * </ProgressTrack>
+ * ```
+ */
+export type IProgressTrackProps = React.ComponentProps<typeof ProgressPrimitives.Track> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<ProgressSlot>;
+};
+/**
+ * Props for the ProgressLabel sub-component.
+ * Wraps Base UI Progress.Label with slot overrides.
+ *
+ * @example
+ * ```tsx
+ * <ProgressLabel>Uploading files...</ProgressLabel>
+ * ```
+ */
+export type IProgressLabelProps = React.ComponentProps<typeof ProgressPrimitives.Label> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<ProgressSlot>;
+};
+/**
+ * Props for the ProgressValue sub-component.
+ * Combines Base UI Progress.Value with CountingNumber for animated numeric display.
+ *
+ * @example
+ * ```tsx
+ * <ProgressValue transition={{ stiffness: 80, damping: 20 }} />
+ * ```
+ */
+export type IProgressValueProps = Omit<React.ComponentProps<typeof ProgressPrimitives.Value>, 'render'> & Omit<ICountingNumberProps, 'number'> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<ProgressSlot>;
+};
+//# sourceMappingURL=Progress.types.d.ts.map

package/dist/react/ui/Progress/Progress.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Progress/Progress.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;IAClF,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACpC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,GAC7F,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,4DAA4D;IAC5D,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;QAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC;AAEJ;;;;;;;;;;GAUG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACxF,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACxF,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,EACrD,QAAQ,CACT,GACC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC,GAAG;IACrC,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC"}

package/dist/react/ui/Progress/index.d.ts

@@ -0,0 +1,111 @@
+import type { ProgressContextType, IProgressProps, IProgressIndicatorProps, IProgressTrackProps, IProgressLabelProps, IProgressValueProps } from './Progress.types';
+declare const useProgress: () => ProgressContextType;
+/**
+ * Progress root component that provides progress context to child components.
+ *
+ * Wraps Base UI `Progress.Root` with a context provider that shares the current
+ * progress value with descendant components (indicator, value display, etc.).
+ *
+ * @param props - Progress props including Base UI root props, slots, and config
+ * @returns A progress container element with context provider
+ *
+ * @example
+ * ```tsx
+ * <Progress value={50} slots={{ root: 'w-full max-w-md' }}>
+ *   <ProgressTrack>
+ *     <ProgressIndicator />
+ *   </ProgressTrack>
+ * </Progress>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With label and animated value
+ * <Progress value={loading}>
+ *   <div className="flex justify-between">
+ *     <ProgressLabel>Loading assets</ProgressLabel>
+ *     <ProgressValue />
+ *   </div>
+ *   <ProgressTrack>
+ *     <ProgressIndicator />
+ *   </ProgressTrack>
+ * </Progress>
+ * ```
+ */
+declare function Progress({ className, slots, config: _config, ...props }: IProgressProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ProgressIndicator renders the animated filled bar within the track.
+ *
+ * Uses `motion.create` to wrap the Base UI Indicator with spring-based
+ * width animation that transitions smoothly as the value changes.
+ *
+ * @param props - Indicator props including transition config and slot overrides
+ * @returns A motion-enhanced indicator element
+ *
+ * @example
+ * ```tsx
+ * <ProgressTrack>
+ *   <ProgressIndicator
+ *     transition={{ type: 'spring', stiffness: 120, damping: 20 }}
+ *     slots={{ indicator: 'bg-cyan-500' }}
+ *   />
+ * </ProgressTrack>
+ * ```
+ */
+declare function ProgressIndicator({ transition, className, slots, ...props }: IProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ProgressTrack renders the background track bar that contains the indicator.
+ *
+ * @param props - Track props including Base UI Track props and slot overrides
+ * @returns A track element for the progress bar
+ *
+ * @example
+ * ```tsx
+ * <ProgressTrack slots={{ track: 'h-3 rounded-lg bg-zinc-800' }}>
+ *   <ProgressIndicator />
+ * </ProgressTrack>
+ * ```
+ */
+declare function ProgressTrack({ className, slots, ...props }: IProgressTrackProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ProgressLabel renders accessible label text for the progress bar.
+ *
+ * @param props - Label props including Base UI Label props and slot overrides
+ * @returns A label element for the progress bar
+ *
+ * @example
+ * ```tsx
+ * <ProgressLabel slots={{ label: 'text-xs uppercase tracking-wide' }}>
+ *   Downloading...
+ * </ProgressLabel>
+ * ```
+ */
+declare function ProgressLabel({ className, slots, ...props }: IProgressLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ProgressValue renders the current progress as an animated counting number.
+ *
+ * Uses the CountingNumber primitive for spring-based numeric transitions,
+ * so the displayed value smoothly animates as progress changes.
+ *
+ * @param props - Value props combining Base UI Value with CountingNumber props and slot overrides
+ * @returns An animated numeric value element
+ *
+ * @example
+ * ```tsx
+ * <ProgressValue
+ *   transition={{ stiffness: 80, damping: 20 }}
+ *   slots={{ value: 'font-mono text-cyan-400' }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With decimal places
+ * <ProgressValue decimalPlaces={1} decimalSeparator="." />
+ * ```
+ */
+declare function ProgressValue({ transition, className, slots, ...props }: IProgressValueProps): import("react/jsx-runtime").JSX.Element;
+export { Progress, ProgressIndicator, ProgressTrack, ProgressLabel, ProgressValue, useProgress, };
+export type { IProgressProps, IProgressIndicatorProps, IProgressTrackProps, IProgressLabelProps, IProgressValueProps, IProgressConfig, ProgressContextType, ProgressSlot, } from './Progress.types';
+export { progressStyles } from './Progress.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/ui/Progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Progress/index.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EACV,mBAAmB,EACnB,cAAc,EACd,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAE1B,QAAA,MAAyB,WAAW,2BACsB,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAUhF;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,iBAAiB,CAAC,EACzB,UAA4D,EAC5D,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAYzB;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAQzE;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAQzE;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,aAAa,CAAC,EACrB,UAA2C,EAC3C,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAgBrB;AAED,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,aAAa,EACb,WAAW,GACZ,CAAC;AAGF,YAAY,EACV,cAAc,EACd,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,mBAAmB,EACnB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/react/ui/Progress/index.js

@@ -0,0 +1,170 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { CountingNumber } from "../../primitives/CountingNumber/index.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { progressStyles } from "./Progress.styles.js";
+import "../../../react";
+import { motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+
+//#region src/react/ui/Progress/index.tsx
+const [ProgressProvider, useProgress] = getStrictContext("ProgressContext");
+const MotionProgressIndicator = motion.create(Progress.Indicator);
+/**
+* Progress root component that provides progress context to child components.
+*
+* Wraps Base UI `Progress.Root` with a context provider that shares the current
+* progress value with descendant components (indicator, value display, etc.).
+*
+* @param props - Progress props including Base UI root props, slots, and config
+* @returns A progress container element with context provider
+*
+* @example
+* ```tsx
+* <Progress value={50} slots={{ root: 'w-full max-w-md' }}>
+*   <ProgressTrack>
+*     <ProgressIndicator />
+*   </ProgressTrack>
+* </Progress>
+* ```
+*
+* @example
+* ```tsx
+* // With label and animated value
+* <Progress value={loading}>
+*   <div className="flex justify-between">
+*     <ProgressLabel>Loading assets</ProgressLabel>
+*     <ProgressValue />
+*   </div>
+*   <ProgressTrack>
+*     <ProgressIndicator />
+*   </ProgressTrack>
+* </Progress>
+* ```
+*/
+function Progress$1({ className, slots, config: _config, ...props }) {
+	return /* @__PURE__ */ jsx(ProgressProvider, {
+		value: { value: props.value ?? 0 },
+		children: /* @__PURE__ */ jsx(Progress.Root, {
+			"data-slot": "progress",
+			className: cn(progressStyles.root, slots?.root, className),
+			...props
+		})
+	});
+}
+/**
+* ProgressIndicator renders the animated filled bar within the track.
+*
+* Uses `motion.create` to wrap the Base UI Indicator with spring-based
+* width animation that transitions smoothly as the value changes.
+*
+* @param props - Indicator props including transition config and slot overrides
+* @returns A motion-enhanced indicator element
+*
+* @example
+* ```tsx
+* <ProgressTrack>
+*   <ProgressIndicator
+*     transition={{ type: 'spring', stiffness: 120, damping: 20 }}
+*     slots={{ indicator: 'bg-cyan-500' }}
+*   />
+* </ProgressTrack>
+* ```
+*/
+function ProgressIndicator({ transition = {
+	type: "spring",
+	stiffness: 100,
+	damping: 30
+}, className, slots, ...props }) {
+	const { value } = useProgress();
+	return /* @__PURE__ */ jsx(MotionProgressIndicator, {
+		"data-slot": "progress-indicator",
+		animate: { width: `${value}%` },
+		transition,
+		className: cn(progressStyles.indicator, slots?.indicator, className),
+		...props
+	});
+}
+/**
+* ProgressTrack renders the background track bar that contains the indicator.
+*
+* @param props - Track props including Base UI Track props and slot overrides
+* @returns A track element for the progress bar
+*
+* @example
+* ```tsx
+* <ProgressTrack slots={{ track: 'h-3 rounded-lg bg-zinc-800' }}>
+*   <ProgressIndicator />
+* </ProgressTrack>
+* ```
+*/
+function ProgressTrack({ className, slots, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Track, {
+		"data-slot": "progress-track",
+		className: cn(progressStyles.track, slots?.track, className),
+		...props
+	});
+}
+/**
+* ProgressLabel renders accessible label text for the progress bar.
+*
+* @param props - Label props including Base UI Label props and slot overrides
+* @returns A label element for the progress bar
+*
+* @example
+* ```tsx
+* <ProgressLabel slots={{ label: 'text-xs uppercase tracking-wide' }}>
+*   Downloading...
+* </ProgressLabel>
+* ```
+*/
+function ProgressLabel({ className, slots, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Label, {
+		"data-slot": "progress-label",
+		className: cn(progressStyles.label, slots?.label, className),
+		...props
+	});
+}
+/**
+* ProgressValue renders the current progress as an animated counting number.
+*
+* Uses the CountingNumber primitive for spring-based numeric transitions,
+* so the displayed value smoothly animates as progress changes.
+*
+* @param props - Value props combining Base UI Value with CountingNumber props and slot overrides
+* @returns An animated numeric value element
+*
+* @example
+* ```tsx
+* <ProgressValue
+*   transition={{ stiffness: 80, damping: 20 }}
+*   slots={{ value: 'font-mono text-cyan-400' }}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // With decimal places
+* <ProgressValue decimalPlaces={1} decimalSeparator="." />
+* ```
+*/
+function ProgressValue({ transition = {
+	stiffness: 80,
+	damping: 20
+}, className, slots, ...props }) {
+	const { value } = useProgress();
+	return /* @__PURE__ */ jsx(Progress.Value, {
+		"data-slot": "progress-value",
+		render: /* @__PURE__ */ jsx(CountingNumber, {
+			number: value ?? 0,
+			transition,
+			className: cn(progressStyles.value, slots?.value, className),
+			...props
+		})
+	});
+}
+
+//#endregion
+export { Progress$1 as Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, useProgress };

package/dist/react/ui/Select/Select.styles.d.ts

@@ -0,0 +1,7 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the Select component family. */
+type SelectSlot = 'root' | 'trigger' | 'content' | 'item' | 'label' | 'separator' | 'group' | 'value' | 'scrollButton';
+declare const selectStyles: StyleSlots<SelectSlot>;
+export { selectStyles };
+export type { SelectSlot };
+//# sourceMappingURL=Select.styles.d.ts.map

package/dist/react/ui/Select/Select.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Select/Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,sDAAsD;AACtD,KAAK,UAAU,GACX,MAAM,GACN,SAAS,GACT,SAAS,GACT,MAAM,GACN,OAAO,GACP,WAAW,GACX,OAAO,GACP,OAAO,GACP,cAAc,CAAC;AAEnB,QAAA,MAAM,YAAY,EAAE,UAAU,CAAC,UAAU,CAYxC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/react/ui/Select/Select.styles.js

@@ -0,0 +1,15 @@
+//#region src/react/ui/Select/Select.styles.ts
+const selectStyles = {
+	root: "",
+	trigger: "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	content: "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none",
+	item: "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	label: "text-muted-foreground px-1.5 py-1 text-xs",
+	separator: "bg-border -mx-1 my-1 h-px pointer-events-none",
+	group: "scroll-my-1 p-1",
+	value: "flex flex-1 text-left",
+	scrollButton: "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 w-full"
+};
+
+//#endregion
+export { selectStyles };

package/dist/react/ui/Select/Select.types.d.ts

@@ -0,0 +1,28 @@
+import type { Select as SelectPrimitive } from '@base-ui/react/select';
+import type { SlotOverrides } from '../../../core/types';
+import type { SelectSlot } from './Select.styles';
+/** Props for the Select root. */
+type ISelectProps = SelectPrimitive.Root.Props<any>;
+/** Props for SelectGroup. */
+type ISelectGroupProps = SelectPrimitive.Group.Props;
+/** Props for SelectValue. */
+type ISelectValueProps = SelectPrimitive.Value.Props;
+/** Props for SelectTrigger. */
+interface ISelectTriggerProps extends SelectPrimitive.Trigger.Props {
+    /** Trigger size variant. */
+    size?: 'sm' | 'default';
+    /** Override classes for select visual regions. */
+    slots?: SlotOverrides<SelectSlot>;
+}
+/** Props for SelectContent. */
+interface ISelectContentProps extends SelectPrimitive.Popup.Props, Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'> {
+    slots?: SlotOverrides<SelectSlot>;
+}
+/** Props for SelectLabel. */
+type ISelectLabelProps = SelectPrimitive.GroupLabel.Props;
+/** Props for SelectItem. */
+type ISelectItemProps = SelectPrimitive.Item.Props;
+/** Props for SelectSeparator. */
+type ISelectSeparatorProps = SelectPrimitive.Separator.Props;
+export type { ISelectProps, ISelectGroupProps, ISelectValueProps, ISelectTriggerProps, ISelectContentProps, ISelectLabelProps, ISelectItemProps, ISelectSeparatorProps, };
+//# sourceMappingURL=Select.types.d.ts.map

package/dist/react/ui/Select/Select.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,iCAAiC;AAEjC,KAAK,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAEpD,6BAA6B;AAC7B,KAAK,iBAAiB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;AAErD,6BAA6B;AAC7B,KAAK,iBAAiB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;AAErD,+BAA+B;AAC/B,UAAU,mBAAoB,SAAQ,eAAe,CAAC,OAAO,CAAC,KAAK;IACjE,4BAA4B;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACnC;AAED,+BAA+B;AAC/B,UAAU,mBACR,SAAQ,eAAe,CAAC,KAAK,CAAC,KAAK,EACjC,IAAI,CACF,eAAe,CAAC,UAAU,CAAC,KAAK,EAChC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,sBAAsB,CACzE;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACnC;AAED,6BAA6B;AAC7B,KAAK,iBAAiB,GAAG,eAAe,CAAC,UAAU,CAAC,KAAK,CAAC;AAE1D,4BAA4B;AAC5B,KAAK,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;AAEnD,iCAAiC;AACjC,KAAK,qBAAqB,GAAG,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC;AAE7D,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,CAAC"}

package/dist/react/ui/Select/index.d.ts

@@ -0,0 +1,38 @@
+import * as React from '../../../react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+import type { ISelectGroupProps, ISelectValueProps, ISelectTriggerProps, ISelectContentProps, ISelectLabelProps, ISelectItemProps, ISelectSeparatorProps } from './Select.types';
+/** Select — root component wrapping Base UI Select. */
+declare const Select: typeof SelectPrimitive.Root;
+/** SelectGroup — groups related select items. */
+declare function SelectGroup({ className, ...props }: ISelectGroupProps): import("react/jsx-runtime").JSX.Element;
+/** SelectValue — displays the selected value text. */
+declare function SelectValue({ className, ...props }: ISelectValueProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * SelectTrigger — button that opens the select dropdown.
+ *
+ * @param size - Trigger size: 'default' or 'sm'
+ *
+ * @example
+ * ```tsx
+ * <SelectTrigger>
+ *   <SelectValue placeholder="Choose..." />
+ * </SelectTrigger>
+ * ```
+ */
+declare function SelectTrigger({ className, size, children, slots, ...props }: ISelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** SelectContent — dropdown popup content for the select. */
+declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, slots, ...props }: ISelectContentProps): import("react/jsx-runtime").JSX.Element;
+/** SelectLabel — label for a group of select items. */
+declare function SelectLabel({ className, ...props }: ISelectLabelProps): import("react/jsx-runtime").JSX.Element;
+/** SelectItem — a single selectable option. */
+declare function SelectItem({ className, children, ...props }: ISelectItemProps): import("react/jsx-runtime").JSX.Element;
+/** SelectSeparator — visual divider between select items. */
+declare function SelectSeparator({ className, ...props }: ISelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
+/** SelectScrollUpButton — scroll indicator for the top of the list. */
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>): import("react/jsx-runtime").JSX.Element;
+/** SelectScrollDownButton — scroll indicator for the bottom of the list. */
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+export type { ISelectProps, ISelectGroupProps, ISelectValueProps, ISelectTriggerProps, ISelectContentProps, ISelectLabelProps, ISelectItemProps, ISelectSeparatorProps, } from './Select.types';
+export type { SelectSlot } from './Select.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/ui/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAWlE,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,gBAAgB,CAAC;AAExB,uDAAuD;AACvD,QAAA,MAAM,MAAM,6BAAuB,CAAC;AAEpC,iDAAiD;AACjD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAQ9D;AAED,sDAAsD;AACtD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAQ9D;AAED;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAoBrB;AAED,6DAA6D;AAC7D,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,oBAA2B,EAC3B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAwBrB;AAED,uDAAuD;AACvD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAQ9D;AAED,+CAA+C;AAC/C,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAmBtE;AAED,6DAA6D;AAC7D,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAQtE;AAED,uEAAuE;AACvE,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,aAAa,CAAC,2CAU5D;AAED,4EAA4E;AAC5E,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,eAAe,CAAC,2CAU9D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC;AAEF,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}