xyne-components 0.1.0 → 0.1.2

package/dist/polymorphic-BpYm1AeE.d.cts

@@ -0,0 +1,115 @@
+import React, { CSSProperties } from 'react';
+
+type SxValue = string | number | null | undefined;
+type SxProp = {
+    m?: SxValue;
+    mt?: SxValue;
+    mr?: SxValue;
+    mb?: SxValue;
+    ml?: SxValue;
+    mx?: SxValue;
+    my?: SxValue;
+    p?: SxValue;
+    pt?: SxValue;
+    pr?: SxValue;
+    pb?: SxValue;
+    pl?: SxValue;
+    px?: SxValue;
+    py?: SxValue;
+    gap?: SxValue;
+    rowGap?: SxValue;
+    columnGap?: SxValue;
+    width?: SxValue;
+    height?: SxValue;
+    minWidth?: SxValue;
+    maxWidth?: SxValue;
+    minHeight?: SxValue;
+    maxHeight?: SxValue;
+    display?: CSSProperties['display'];
+    flexDirection?: CSSProperties['flexDirection'];
+    flexWrap?: CSSProperties['flexWrap'];
+    flex?: CSSProperties['flex'];
+    flexShrink?: CSSProperties['flexShrink'];
+    flexGrow?: CSSProperties['flexGrow'];
+    alignItems?: CSSProperties['alignItems'];
+    alignSelf?: CSSProperties['alignSelf'];
+    justifyContent?: CSSProperties['justifyContent'];
+    justifySelf?: CSSProperties['justifySelf'];
+    position?: CSSProperties['position'];
+    top?: SxValue;
+    right?: SxValue;
+    bottom?: SxValue;
+    left?: SxValue;
+    zIndex?: CSSProperties['zIndex'];
+    overflow?: CSSProperties['overflow'];
+    overflowX?: CSSProperties['overflowX'];
+    overflowY?: CSSProperties['overflowY'];
+    color?: string;
+    backgroundColor?: string;
+    background?: string;
+    opacity?: number;
+    visibility?: CSSProperties['visibility'];
+    fontSize?: SxValue;
+    /** CSS font-weight — pass a number (400, 500, 700) or string ('bold'). NOT scaled. */
+    fontWeight?: CSSProperties['fontWeight'];
+    /** CSS line-height — pass a number (1.5), px string ('20px'), or unitless ('1'). NOT scaled. */
+    lineHeight?: CSSProperties['lineHeight'];
+    fontFamily?: string;
+    textAlign?: CSSProperties['textAlign'];
+    textDecoration?: CSSProperties['textDecoration'];
+    textTransform?: CSSProperties['textTransform'];
+    whiteSpace?: CSSProperties['whiteSpace'];
+    letterSpacing?: SxValue;
+    aspectRatio?: CSSProperties['aspectRatio'];
+    border?: string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderColor?: string;
+    borderRadius?: SxValue;
+    borderWidth?: SxValue;
+    boxShadow?: string;
+    outline?: string;
+    cursor?: CSSProperties['cursor'];
+    pointerEvents?: CSSProperties['pointerEvents'];
+    userSelect?: CSSProperties['userSelect'];
+    transition?: string;
+    transform?: string;
+};
+declare function resolveSx(sx?: SxProp): CSSProperties;
+
+/**
+ * Polymorphic component utilities for xyne-components.
+ *
+ * Allows components to render as any HTML element or React component
+ * via the `component` prop, while preserving full type-safety.
+ *
+ * @example
+ * // Render a Label as an anchor tag
+ * <Label component="a" href="/dashboard">Go to dashboard</Label>
+ *
+ * // Render a ListItem as a React Router Link
+ * <ListItem component={RouterLink} to="/settings" label="Settings" />
+ */
+
+/** Props for injecting the `component` override */
+type AsProp<C extends React.ElementType> = {
+    /** Render as a different element or component. @default varies per component */
+    component?: C;
+};
+/** Keys to omit from the host element's native props (already covered by our own props) */
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+/**
+ * Merge component-own props with native props of the chosen element.
+ * Any native prop that conflicts with our own props is omitted.
+ */
+type PolymorphicComponentProps<C extends React.ElementType, OwnProps = Record<string, never>> = React.PropsWithChildren<OwnProps & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, OwnProps>>;
+/** Extract the ref type for the chosen element */
+type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+/** PolymorphicComponentProps + ref */
+type PolymorphicComponentPropsWithRef<C extends React.ElementType, OwnProps = Record<string, never>> = PolymorphicComponentProps<C, OwnProps> & {
+    ref?: PolymorphicRef<C>;
+};
+
+export { type AsProp as A, type PolymorphicComponentProps as P, type SxProp as S, type PolymorphicComponentPropsWithRef as a, type PolymorphicRef as b, resolveSx as r };

package/dist/polymorphic-BpYm1AeE.d.ts

@@ -0,0 +1,115 @@
+import React, { CSSProperties } from 'react';
+
+type SxValue = string | number | null | undefined;
+type SxProp = {
+    m?: SxValue;
+    mt?: SxValue;
+    mr?: SxValue;
+    mb?: SxValue;
+    ml?: SxValue;
+    mx?: SxValue;
+    my?: SxValue;
+    p?: SxValue;
+    pt?: SxValue;
+    pr?: SxValue;
+    pb?: SxValue;
+    pl?: SxValue;
+    px?: SxValue;
+    py?: SxValue;
+    gap?: SxValue;
+    rowGap?: SxValue;
+    columnGap?: SxValue;
+    width?: SxValue;
+    height?: SxValue;
+    minWidth?: SxValue;
+    maxWidth?: SxValue;
+    minHeight?: SxValue;
+    maxHeight?: SxValue;
+    display?: CSSProperties['display'];
+    flexDirection?: CSSProperties['flexDirection'];
+    flexWrap?: CSSProperties['flexWrap'];
+    flex?: CSSProperties['flex'];
+    flexShrink?: CSSProperties['flexShrink'];
+    flexGrow?: CSSProperties['flexGrow'];
+    alignItems?: CSSProperties['alignItems'];
+    alignSelf?: CSSProperties['alignSelf'];
+    justifyContent?: CSSProperties['justifyContent'];
+    justifySelf?: CSSProperties['justifySelf'];
+    position?: CSSProperties['position'];
+    top?: SxValue;
+    right?: SxValue;
+    bottom?: SxValue;
+    left?: SxValue;
+    zIndex?: CSSProperties['zIndex'];
+    overflow?: CSSProperties['overflow'];
+    overflowX?: CSSProperties['overflowX'];
+    overflowY?: CSSProperties['overflowY'];
+    color?: string;
+    backgroundColor?: string;
+    background?: string;
+    opacity?: number;
+    visibility?: CSSProperties['visibility'];
+    fontSize?: SxValue;
+    /** CSS font-weight — pass a number (400, 500, 700) or string ('bold'). NOT scaled. */
+    fontWeight?: CSSProperties['fontWeight'];
+    /** CSS line-height — pass a number (1.5), px string ('20px'), or unitless ('1'). NOT scaled. */
+    lineHeight?: CSSProperties['lineHeight'];
+    fontFamily?: string;
+    textAlign?: CSSProperties['textAlign'];
+    textDecoration?: CSSProperties['textDecoration'];
+    textTransform?: CSSProperties['textTransform'];
+    whiteSpace?: CSSProperties['whiteSpace'];
+    letterSpacing?: SxValue;
+    aspectRatio?: CSSProperties['aspectRatio'];
+    border?: string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderColor?: string;
+    borderRadius?: SxValue;
+    borderWidth?: SxValue;
+    boxShadow?: string;
+    outline?: string;
+    cursor?: CSSProperties['cursor'];
+    pointerEvents?: CSSProperties['pointerEvents'];
+    userSelect?: CSSProperties['userSelect'];
+    transition?: string;
+    transform?: string;
+};
+declare function resolveSx(sx?: SxProp): CSSProperties;
+
+/**
+ * Polymorphic component utilities for xyne-components.
+ *
+ * Allows components to render as any HTML element or React component
+ * via the `component` prop, while preserving full type-safety.
+ *
+ * @example
+ * // Render a Label as an anchor tag
+ * <Label component="a" href="/dashboard">Go to dashboard</Label>
+ *
+ * // Render a ListItem as a React Router Link
+ * <ListItem component={RouterLink} to="/settings" label="Settings" />
+ */
+
+/** Props for injecting the `component` override */
+type AsProp<C extends React.ElementType> = {
+    /** Render as a different element or component. @default varies per component */
+    component?: C;
+};
+/** Keys to omit from the host element's native props (already covered by our own props) */
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+/**
+ * Merge component-own props with native props of the chosen element.
+ * Any native prop that conflicts with our own props is omitted.
+ */
+type PolymorphicComponentProps<C extends React.ElementType, OwnProps = Record<string, never>> = React.PropsWithChildren<OwnProps & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, OwnProps>>;
+/** Extract the ref type for the chosen element */
+type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+/** PolymorphicComponentProps + ref */
+type PolymorphicComponentPropsWithRef<C extends React.ElementType, OwnProps = Record<string, never>> = PolymorphicComponentProps<C, OwnProps> & {
+    ref?: PolymorphicRef<C>;
+};
+
+export { type AsProp as A, type PolymorphicComponentProps as P, type SxProp as S, type PolymorphicComponentPropsWithRef as a, type PolymorphicRef as b, resolveSx as r };

package/dist/styles/index.css

@@ -217,6 +217,7 @@
   /* ─── Backgrounds ──────────────────────────────────────────── */
   --xc-color-bg-white:        #0e121b;
   --xc-color-bg-subtle:       #181b25;
+  --xc-color-bg-surface-hover: #1d2126;
   --xc-color-bg-brand:        #2d1505;
   --xc-color-bg-error:        #2a0d0a;
   --xc-color-bg-success:      #052e16;
@@ -269,7 +270,7 @@
 
   /* Dot sub-component defaults */
   --xc-badge-dot-fill:          var(--xc-color-orange-600, #e8601a);
-  --xc-badge-dot-stroke:        #ffffff;
+  --xc-badge-dot-stroke:        var(--xc-color-bg-white);
   --xc-badge-dot-stroke-width:  1.5px;
   --xc-badge-dot-size:          6px;
 }
@@ -286,8 +287,8 @@
   justify-content: center;
   gap: var(--xc-space-2);                         /* 4px — Figma gap */
 
-  /* Box — Figma: min-h 6, min-w 16, px badge/padding-x, py badge/padding-y */
-  min-height: 6px;
+  /* Box — Figma: min-h 20, min-w 16, px badge/padding-x, py badge/padding-y */
+  min-height: 20px;
   min-width: 16px;
   padding-left: var(--xc-badge-padding-x);        /* 4px */
   padding-right: var(--xc-badge-padding-x);       /* 4px */
@@ -312,6 +313,11 @@
 
 /* ── Icon slot — Figma: 12×12, flex-shrink 0 ─────────────────── */
 
+.xc-badge:focus-visible {
+  outline: 2px solid var(--xc-color-border-brand);
+  outline-offset: 2px;
+}
+
 .xc-badge__icon {
   display: flex;
   align-items: center;
@@ -438,8 +444,8 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  flex-shrink: 0;
-  max-width: 240px;
+  flex: 1;
+  min-width: 0;
 }
 
 /* Label text — Figma: Inter Medium 500, 14px/20px, letter-spacing 0, max-w 264, ellipsis */
@@ -567,8 +573,8 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  flex-shrink: 0;
-  max-width: 240px;
+  flex: 1;
+  min-width: 0;
 }
 
 /* Label text — Figma: Inter Medium 500, 14px/20px, letter-spacing 0, max-w 264, ellipsis */
@@ -696,7 +702,6 @@
   flex-direction: column;
   flex: 1;
   min-width: 0;
-  max-width: 240px;
   padding-top: var(--xc-space-2);    /* 4px */
   padding-bottom: var(--xc-space-2); /* 4px */
 }
@@ -795,7 +800,17 @@
 
 /* ── Active [data-active] — keyboard highlight ───────────────── */
 
+.xc-list-item[data-active]:not([data-selected]) {
+  background-color: var(--xc-color-bg-surface-hover);
+}
+
 .xc-list-item[data-active]:not([data-selected]) .xc-list-item__label {
   color: var(--xc-color-text-primary);               /* #101828 */
   font-weight: var(--xc-font-weight-medium);         /* 500 */
 }
+
+.xc-list-item[data-active]:not([data-selected]) .xc-list-item__bar {
+  align-self: auto;
+  height: 20px;
+  background-color: var(--xc-color-border-subtle);
+}

package/dist/theme/index.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+var _chunk2JYR6C3Lcjs = require('../chunk-2JYR6C3L.cjs');
+
+
+var _chunkWUV742E6cjs = require('../chunk-WUV742E6.cjs');
+
+
+
+
+
+exports.ColorSchemeProvider = _chunk2JYR6C3Lcjs.ColorSchemeProvider; exports.DEFAULT_THEME = _chunkWUV742E6cjs.DEFAULT_THEME; exports.ThemeProvider = _chunk2JYR6C3Lcjs.ThemeProvider; exports.createTheme = _chunk2JYR6C3Lcjs.createTheme;
+//# sourceMappingURL=index.cjs.map

package/dist/theme/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/harshpreet.singh/Desktop/Juspay/xyne-spaces/components/dist/theme/index.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACA;AACA;AACF,yDAA8B;AAC9B;AACE;AACF,yDAA8B;AAC9B;AACE;AACA;AACA;AACA;AACF,2OAAC","file":"/Users/harshpreet.singh/Desktop/Juspay/xyne-spaces/components/dist/theme/index.cjs"}

package/dist/theme/index.d.cts

@@ -0,0 +1,56 @@
+import { b as XyneTheme, c as XyneThemeOverride, C as ColorScheme, R as ResolvedColorScheme } from '../colorScheme.types-CqDRrNL0.cjs';
+export { a as ColorSchemeContextValue, X as XyneComponentTheme } from '../colorScheme.types-CqDRrNL0.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+/**
+ * Default theme — values match tokens.css (light mode).
+ * Used as the base for createTheme() deep-merge.
+ */
+declare const DEFAULT_THEME: XyneTheme;
+
+/** Deep-merge a partial override with DEFAULT_THEME to produce a full theme. */
+declare function createTheme(override: XyneThemeOverride): XyneTheme;
+
+interface ThemeProviderProps {
+    /** Theme override — deep-merged with DEFAULT_THEME */
+    theme?: XyneThemeOverride;
+    /** CSS selector for variable injection. @default ':root' */
+    cssVariablesSelector?: string;
+    /** Initial color scheme if nothing is stored. @default 'light' */
+    defaultColorScheme?: ColorScheme;
+    /** Force a specific color scheme — ignores storage and user toggle. */
+    forceColorScheme?: ResolvedColorScheme;
+    /** localStorage key for color scheme persistence. @default 'xc-color-scheme' */
+    colorSchemeStorageKey?: string;
+    /** Return the element to set `data-theme` on. @default () => document.documentElement */
+    getRootElement?: () => HTMLElement | undefined;
+    children: React.ReactNode;
+}
+/**
+ * Provides theme context and injects CSS variable overrides via a <style> tag.
+ * Wrap your app (or a subtree) to customise design tokens.
+ *
+ * @important Pass a stable reference (from `createTheme()` or `useMemo`) to the `theme` prop.
+ * Inline object literals recreate a new reference every render, causing unnecessary CSS
+ * recalculations. Example: `const theme = createTheme({ text: { brand: '#0066ff' } })` outside
+ * your component, then `<ThemeProvider theme={theme}>`.
+ *
+ * @example
+ * ```tsx
+ * const theme = createTheme({ text: { brand: '#0066ff' } })
+ * <ThemeProvider theme={theme}>{children}</ThemeProvider>
+ * ```
+ */
+declare function ThemeProvider({ theme: themeOverride, cssVariablesSelector, defaultColorScheme, forceColorScheme, colorSchemeStorageKey, getRootElement, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+interface ColorSchemeProviderProps {
+    defaultColorScheme?: ColorScheme;
+    forceColorScheme?: ResolvedColorScheme;
+    storageKey?: string;
+    getRootElement?: () => HTMLElement | undefined;
+    children: React.ReactNode;
+}
+declare function ColorSchemeProvider({ defaultColorScheme, forceColorScheme, storageKey, getRootElement, children, }: ColorSchemeProviderProps): react_jsx_runtime.JSX.Element;
+
+export { ColorScheme, ColorSchemeProvider, type ColorSchemeProviderProps, DEFAULT_THEME, ResolvedColorScheme, ThemeProvider, type ThemeProviderProps, XyneTheme, XyneThemeOverride, createTheme };

package/dist/theme/index.d.ts

@@ -0,0 +1,56 @@
+import { b as XyneTheme, c as XyneThemeOverride, C as ColorScheme, R as ResolvedColorScheme } from '../colorScheme.types-CqDRrNL0.js';
+export { a as ColorSchemeContextValue, X as XyneComponentTheme } from '../colorScheme.types-CqDRrNL0.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+/**
+ * Default theme — values match tokens.css (light mode).
+ * Used as the base for createTheme() deep-merge.
+ */
+declare const DEFAULT_THEME: XyneTheme;
+
+/** Deep-merge a partial override with DEFAULT_THEME to produce a full theme. */
+declare function createTheme(override: XyneThemeOverride): XyneTheme;
+
+interface ThemeProviderProps {
+    /** Theme override — deep-merged with DEFAULT_THEME */
+    theme?: XyneThemeOverride;
+    /** CSS selector for variable injection. @default ':root' */
+    cssVariablesSelector?: string;
+    /** Initial color scheme if nothing is stored. @default 'light' */
+    defaultColorScheme?: ColorScheme;
+    /** Force a specific color scheme — ignores storage and user toggle. */
+    forceColorScheme?: ResolvedColorScheme;
+    /** localStorage key for color scheme persistence. @default 'xc-color-scheme' */
+    colorSchemeStorageKey?: string;
+    /** Return the element to set `data-theme` on. @default () => document.documentElement */
+    getRootElement?: () => HTMLElement | undefined;
+    children: React.ReactNode;
+}
+/**
+ * Provides theme context and injects CSS variable overrides via a <style> tag.
+ * Wrap your app (or a subtree) to customise design tokens.
+ *
+ * @important Pass a stable reference (from `createTheme()` or `useMemo`) to the `theme` prop.
+ * Inline object literals recreate a new reference every render, causing unnecessary CSS
+ * recalculations. Example: `const theme = createTheme({ text: { brand: '#0066ff' } })` outside
+ * your component, then `<ThemeProvider theme={theme}>`.
+ *
+ * @example
+ * ```tsx
+ * const theme = createTheme({ text: { brand: '#0066ff' } })
+ * <ThemeProvider theme={theme}>{children}</ThemeProvider>
+ * ```
+ */
+declare function ThemeProvider({ theme: themeOverride, cssVariablesSelector, defaultColorScheme, forceColorScheme, colorSchemeStorageKey, getRootElement, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+interface ColorSchemeProviderProps {
+    defaultColorScheme?: ColorScheme;
+    forceColorScheme?: ResolvedColorScheme;
+    storageKey?: string;
+    getRootElement?: () => HTMLElement | undefined;
+    children: React.ReactNode;
+}
+declare function ColorSchemeProvider({ defaultColorScheme, forceColorScheme, storageKey, getRootElement, children, }: ColorSchemeProviderProps): react_jsx_runtime.JSX.Element;
+
+export { ColorScheme, ColorSchemeProvider, type ColorSchemeProviderProps, DEFAULT_THEME, ResolvedColorScheme, ThemeProvider, type ThemeProviderProps, XyneTheme, XyneThemeOverride, createTheme };

package/dist/theme/index.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  ColorSchemeProvider,
+  ThemeProvider,
+  createTheme
+} from "../chunk-2452BBK4.js";
+import {
+  DEFAULT_THEME
+} from "../chunk-54N4ZTTL.js";
+export {
+  ColorSchemeProvider,
+  DEFAULT_THEME,
+  ThemeProvider,
+  createTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/utils/index.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkSRXGVBJ5cjs = require('../chunk-SRXGVBJ5.cjs');
+
+
+exports.resolveSx = _chunkSRXGVBJ5cjs.resolveSx;
+//# sourceMappingURL=index.cjs.map

package/dist/utils/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/harshpreet.singh/Desktop/Juspay/xyne-spaces/components/dist/utils/index.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACF,yDAA8B;AAC9B;AACE;AACF,gDAAC","file":"/Users/harshpreet.singh/Desktop/Juspay/xyne-spaces/components/dist/utils/index.cjs"}

package/dist/utils/index.d.cts

@@ -0,0 +1,7 @@
+export { A as AsProp, P as PolymorphicComponentProps, a as PolymorphicComponentPropsWithRef, b as PolymorphicRef, S as SxProp, r as resolveSx } from '../polymorphic-BpYm1AeE.cjs';
+import React from 'react';
+
+type SlotComponent = React.ElementType;
+type SlotProps<T extends React.ElementType = 'div'> = Partial<React.ComponentPropsWithoutRef<T>>;
+
+export type { SlotComponent, SlotProps };

package/dist/utils/index.d.ts

@@ -0,0 +1,7 @@
+export { A as AsProp, P as PolymorphicComponentProps, a as PolymorphicComponentPropsWithRef, b as PolymorphicRef, S as SxProp, r as resolveSx } from '../polymorphic-BpYm1AeE.js';
+import React from 'react';
+
+type SlotComponent = React.ElementType;
+type SlotProps<T extends React.ElementType = 'div'> = Partial<React.ComponentPropsWithoutRef<T>>;
+
+export type { SlotComponent, SlotProps };

package/dist/utils/index.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  resolveSx
+} from "../chunk-ZS6WGFYT.js";
+export {
+  resolveSx
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xyne-components",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Xyne Design System — React component library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -12,6 +12,41 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./Badge": {
+      "types": "./dist/Badge/index.d.ts",
+      "import": "./dist/Badge/index.js",
+      "require": "./dist/Badge/index.cjs"
+    },
+    "./Label": {
+      "types": "./dist/Label/index.d.ts",
+      "import": "./dist/Label/index.js",
+      "require": "./dist/Label/index.cjs"
+    },
+    "./Directory": {
+      "types": "./dist/Directory/index.d.ts",
+      "import": "./dist/Directory/index.js",
+      "require": "./dist/Directory/index.cjs"
+    },
+    "./ListItem": {
+      "types": "./dist/ListItem/index.d.ts",
+      "import": "./dist/ListItem/index.js",
+      "require": "./dist/ListItem/index.cjs"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js",
+      "require": "./dist/theme/index.cjs"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.cjs"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.js",
+      "require": "./dist/utils/index.cjs"
+    },
     "./styles": "./dist/styles/index.css"
   },
   "files": [
@@ -25,9 +60,10 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx"
   },
+  "sideEffects": false,
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^10.3.4",