@raystack/apsara 0.50.0 → 0.50.1

package/dist/components/color-picker/color-picker-root.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-root.cjs","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["import Color, { type ColorLike } from 'color';\nimport {\n  ComponentPropsWithoutRef,\n  createContext,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport { Flex } from '../flex';\nimport { ColorObject, ModeType, getColorString } from './utils';\n\ntype ColorPickerContextValue = {\n  hue: number;\n  saturation: number;\n  lightness: number;\n  alpha: number;\n  mode: ModeType;\n  setColor: (color: Partial<ColorObject>) => void;\n  setMode: (mode: ModeType) => void;\n};\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(\n  undefined\n);\n\nexport const useColorPicker = () => {\n  const context = useContext(ColorPickerContext);\n  if (!context) {\n    throw new Error('useColorPicker must be used within a ColorPickerProvider');\n  }\n  return context;\n};\n\nexport interface ColorPickerProps\n  extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {\n  value?: ColorLike;\n  defaultValue?: ColorLike;\n  onValueChange?: (value: string, mode: string) => void;\n  defaultMode?: ModeType;\n  mode?: ModeType;\n  onModeChange?: (mode: ModeType) => void;\n}\nexport const ColorPickerRoot = ({\n  value,\n  defaultValue = '#ffffff',\n  onValueChange,\n  defaultMode = 'hex',\n  mode: providedMode,\n  onModeChange,\n  ...props\n}: ColorPickerProps) => {\n  const providedColor = value && (Color(value).hsl().object() as ColorObject);\n\n  const [internalColor, setInternalColor] = useState(\n    Color(defaultValue).hsl().object() as ColorObject\n  );\n  const [internalMode, setInternalMode] = useState(defaultMode);\n\n  const hue = providedColor ? providedColor.h : internalColor.h;\n  const saturation = providedColor ? providedColor.s : internalColor.s;\n  const lightness = providedColor ? providedColor.l : internalColor.l;\n  const alpha =\n    (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;\n\n  const mode = providedMode ?? internalMode;\n\n  const setColor = useCallback<ColorPickerContextValue['setColor']>(\n    value => {\n      setInternalColor(_color => {\n        const updatedColor = { ..._color, ...value };\n\n        if (!onValueChange) return updatedColor;\n\n        const color = Color.hsl(\n          updatedColor.h,\n          updatedColor.s,\n          updatedColor.l,\n          updatedColor?.alpha ?? 1\n        );\n\n        onValueChange(getColorString(color, mode), mode);\n\n        return updatedColor;\n      });\n    },\n    [mode, onValueChange]\n  );\n\n  const setMode = useCallback<ColorPickerContextValue['setMode']>(\n    value => {\n      setInternalMode(value);\n      onModeChange?.(value);\n    },\n    [onModeChange]\n  );\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        hue,\n        saturation,\n        lightness,\n        alpha,\n        mode,\n        setColor,\n        setMode\n      }}\n    >\n      <Flex direction='column' gap={4} {...props} />\n    </ColorPickerContext.Provider>\n  );\n};\n"],"names":["createContext","useContext","Color","useState","useCallback","getColorString","_jsx","Flex"],"mappings":";;;;;;;;AAqBA,MAAM,kBAAkB,GAAGA,mBAAa,CACtC,SAAS,CACV,CAAC;AAEK,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,kBAAkB,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;KAC7E;AACD,IAAA,OAAO,OAAO,CAAC;AACjB,EAAE;AAWK,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,YAAY,GAAG,SAAS,EACxB,aAAa,EACb,WAAW,GAAG,KAAK,EACnB,IAAI,EAAE,YAAY,EAClB,YAAY,EACZ,GAAG,KAAK,EACS,KAAI;AACrB,IAAA,MAAM,aAAa,GAAG,KAAK,IAAKC,aAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAkB,CAAC;AAE5E,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAChDD,aAAK,CAAC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAiB,CAClD,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGC,cAAQ,CAAC,WAAW,CAAC,CAAC;AAE9D,IAAA,MAAM,GAAG,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AAC9D,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACrE,IAAA,MAAM,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACpE,IAAA,MAAM,KAAK,GACT,CAAC,aAAa,GAAG,aAAa,EAAE,KAAK,GAAG,aAAa,EAAE,KAAK,KAAK,CAAC,CAAC;AAErE,IAAA,MAAM,IAAI,GAAG,YAAY,IAAI,YAAY,CAAC;AAE1C,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAC1B,KAAK,IAAG;QACN,gBAAgB,CAAC,MAAM,IAAG;YACxB,MAAM,YAAY,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAE7C,YAAA,IAAI,CAAC,aAAa;AAAE,gBAAA,OAAO,YAAY,CAAC;YAExC,MAAM,KAAK,GAAGF,aAAK,CAAC,GAAG,CACrB,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,EAAE,KAAK,IAAI,CAAC,CACzB,CAAC;YAEF,aAAa,CAACG,oBAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAEjD,YAAA,OAAO,YAAY,CAAC;AACtB,SAAC,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,EAAE,aAAa,CAAC,CACtB,CAAC;AAEF,IAAA,MAAM,OAAO,GAAGD,iBAAW,CACzB,KAAK,IAAG;QACN,eAAe,CAAC,KAAK,CAAC,CAAC;AACvB,QAAA,YAAY,GAAG,KAAK,CAAC,CAAC;AACxB,KAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;AAEF,IAAA,QACEE,cAAC,CAAA,kBAAkB,CAAC,QAAQ,EAAA,EAC1B,KAAK,EAAE;YACL,GAAG;YACH,UAAU;YACV,SAAS;YACT,KAAK;YACL,IAAI;YACJ,QAAQ;YACR,OAAO;AACR,SAAA,EAAA,QAAA,EAEDA,cAAC,CAAAC,SAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAM,GAAA,KAAK,EAAI,CAAA,EAAA,CAClB,EAC9B;AACJ;;;;;"}
+{"version":3,"file":"color-picker-root.cjs","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["'use client';\n\nimport Color, { type ColorLike } from 'color';\nimport {\n  ComponentPropsWithoutRef,\n  createContext,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport { Flex } from '../flex';\nimport { ColorObject, ModeType, getColorString } from './utils';\n\ntype ColorPickerContextValue = {\n  hue: number;\n  saturation: number;\n  lightness: number;\n  alpha: number;\n  mode: ModeType;\n  setColor: (color: Partial<ColorObject>) => void;\n  setMode: (mode: ModeType) => void;\n};\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(\n  undefined\n);\n\nexport const useColorPicker = () => {\n  const context = useContext(ColorPickerContext);\n  if (!context) {\n    throw new Error('useColorPicker must be used within a ColorPickerProvider');\n  }\n  return context;\n};\n\nexport interface ColorPickerProps\n  extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {\n  value?: ColorLike;\n  defaultValue?: ColorLike;\n  onValueChange?: (value: string, mode: string) => void;\n  defaultMode?: ModeType;\n  mode?: ModeType;\n  onModeChange?: (mode: ModeType) => void;\n}\nexport const ColorPickerRoot = ({\n  value,\n  defaultValue = '#ffffff',\n  onValueChange,\n  defaultMode = 'hex',\n  mode: providedMode,\n  onModeChange,\n  ...props\n}: ColorPickerProps) => {\n  const providedColor = value && (Color(value).hsl().object() as ColorObject);\n\n  const [internalColor, setInternalColor] = useState(\n    Color(defaultValue).hsl().object() as ColorObject\n  );\n  const [internalMode, setInternalMode] = useState(defaultMode);\n\n  const hue = providedColor ? providedColor.h : internalColor.h;\n  const saturation = providedColor ? providedColor.s : internalColor.s;\n  const lightness = providedColor ? providedColor.l : internalColor.l;\n  const alpha =\n    (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;\n\n  const mode = providedMode ?? internalMode;\n\n  const setColor = useCallback<ColorPickerContextValue['setColor']>(\n    value => {\n      setInternalColor(_color => {\n        const updatedColor = { ..._color, ...value };\n\n        if (!onValueChange) return updatedColor;\n\n        const color = Color.hsl(\n          updatedColor.h,\n          updatedColor.s,\n          updatedColor.l,\n          updatedColor?.alpha ?? 1\n        );\n\n        onValueChange(getColorString(color, mode), mode);\n\n        return updatedColor;\n      });\n    },\n    [mode, onValueChange]\n  );\n\n  const setMode = useCallback<ColorPickerContextValue['setMode']>(\n    value => {\n      setInternalMode(value);\n      onModeChange?.(value);\n    },\n    [onModeChange]\n  );\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        hue,\n        saturation,\n        lightness,\n        alpha,\n        mode,\n        setColor,\n        setMode\n      }}\n    >\n      <Flex direction='column' gap={4} {...props} />\n    </ColorPickerContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAuBA;AAIO;AACL;;AAEE;;AAEF;AACF;AAWO;AASL;AAEA;;AAKA;AACA;AACA;AACA;AAGA;AAEA;;;AAKM;AAAoB;;;AAWpB;AACF;AACF;AAIF;;AAGI;AACF;AAIF;;;;;;;;AAUK;AAKP;;;"}

package/dist/components/color-picker/color-picker-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-root.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-root.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACL,wBAAwB,EAKzB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAkB,MAAM,SAAS,CAAC;AAEhE,KAAK,uBAAuB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACnC,CAAC;AAMF,eAAO,MAAM,cAAc,+BAM1B,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,cAAc,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACzC;AACD,eAAO,MAAM,eAAe,oGAQzB,gBAAgB,4CA6DlB,CAAC"}
+{"version":3,"file":"color-picker-root.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-root.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACL,wBAAwB,EAKzB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAkB,MAAM,SAAS,CAAC;AAEhE,KAAK,uBAAuB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACnC,CAAC;AAMF,eAAO,MAAM,cAAc,+BAM1B,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,cAAc,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACzC;AACD,eAAO,MAAM,eAAe,oGAQzB,gBAAgB,4CA6DlB,CAAC"}

package/dist/components/color-picker/color-picker-root.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import Color from '../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.js';
 import { createContext, useState, useCallback, useContext } from 'react';

package/dist/components/color-picker/color-picker-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-root.js","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["import Color, { type ColorLike } from 'color';\nimport {\n  ComponentPropsWithoutRef,\n  createContext,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport { Flex } from '../flex';\nimport { ColorObject, ModeType, getColorString } from './utils';\n\ntype ColorPickerContextValue = {\n  hue: number;\n  saturation: number;\n  lightness: number;\n  alpha: number;\n  mode: ModeType;\n  setColor: (color: Partial<ColorObject>) => void;\n  setMode: (mode: ModeType) => void;\n};\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(\n  undefined\n);\n\nexport const useColorPicker = () => {\n  const context = useContext(ColorPickerContext);\n  if (!context) {\n    throw new Error('useColorPicker must be used within a ColorPickerProvider');\n  }\n  return context;\n};\n\nexport interface ColorPickerProps\n  extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {\n  value?: ColorLike;\n  defaultValue?: ColorLike;\n  onValueChange?: (value: string, mode: string) => void;\n  defaultMode?: ModeType;\n  mode?: ModeType;\n  onModeChange?: (mode: ModeType) => void;\n}\nexport const ColorPickerRoot = ({\n  value,\n  defaultValue = '#ffffff',\n  onValueChange,\n  defaultMode = 'hex',\n  mode: providedMode,\n  onModeChange,\n  ...props\n}: ColorPickerProps) => {\n  const providedColor = value && (Color(value).hsl().object() as ColorObject);\n\n  const [internalColor, setInternalColor] = useState(\n    Color(defaultValue).hsl().object() as ColorObject\n  );\n  const [internalMode, setInternalMode] = useState(defaultMode);\n\n  const hue = providedColor ? providedColor.h : internalColor.h;\n  const saturation = providedColor ? providedColor.s : internalColor.s;\n  const lightness = providedColor ? providedColor.l : internalColor.l;\n  const alpha =\n    (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;\n\n  const mode = providedMode ?? internalMode;\n\n  const setColor = useCallback<ColorPickerContextValue['setColor']>(\n    value => {\n      setInternalColor(_color => {\n        const updatedColor = { ..._color, ...value };\n\n        if (!onValueChange) return updatedColor;\n\n        const color = Color.hsl(\n          updatedColor.h,\n          updatedColor.s,\n          updatedColor.l,\n          updatedColor?.alpha ?? 1\n        );\n\n        onValueChange(getColorString(color, mode), mode);\n\n        return updatedColor;\n      });\n    },\n    [mode, onValueChange]\n  );\n\n  const setMode = useCallback<ColorPickerContextValue['setMode']>(\n    value => {\n      setInternalMode(value);\n      onModeChange?.(value);\n    },\n    [onModeChange]\n  );\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        hue,\n        saturation,\n        lightness,\n        alpha,\n        mode,\n        setColor,\n        setMode\n      }}\n    >\n      <Flex direction='column' gap={4} {...props} />\n    </ColorPickerContext.Provider>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAqBA,MAAM,kBAAkB,GAAG,aAAa,CACtC,SAAS,CACV,CAAC;AAEK,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;KAC7E;AACD,IAAA,OAAO,OAAO,CAAC;AACjB,EAAE;AAWK,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,YAAY,GAAG,SAAS,EACxB,aAAa,EACb,WAAW,GAAG,KAAK,EACnB,IAAI,EAAE,YAAY,EAClB,YAAY,EACZ,GAAG,KAAK,EACS,KAAI;AACrB,IAAA,MAAM,aAAa,GAAG,KAAK,IAAK,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAkB,CAAC;AAE5E,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,KAAK,CAAC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,EAAiB,CAClD,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAE9D,IAAA,MAAM,GAAG,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AAC9D,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACrE,IAAA,MAAM,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;AACpE,IAAA,MAAM,KAAK,GACT,CAAC,aAAa,GAAG,aAAa,EAAE,KAAK,GAAG,aAAa,EAAE,KAAK,KAAK,CAAC,CAAC;AAErE,IAAA,MAAM,IAAI,GAAG,YAAY,IAAI,YAAY,CAAC;AAE1C,IAAA,MAAM,QAAQ,GAAG,WAAW,CAC1B,KAAK,IAAG;QACN,gBAAgB,CAAC,MAAM,IAAG;YACxB,MAAM,YAAY,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAE7C,YAAA,IAAI,CAAC,aAAa;AAAE,gBAAA,OAAO,YAAY,CAAC;YAExC,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CACrB,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,CAAC,CAAC,EACd,YAAY,EAAE,KAAK,IAAI,CAAC,CACzB,CAAC;YAEF,aAAa,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAEjD,YAAA,OAAO,YAAY,CAAC;AACtB,SAAC,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,EAAE,aAAa,CAAC,CACtB,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,IAAG;QACN,eAAe,CAAC,KAAK,CAAC,CAAC;AACvB,QAAA,YAAY,GAAG,KAAK,CAAC,CAAC;AACxB,KAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;AAEF,IAAA,QACEA,GAAC,CAAA,kBAAkB,CAAC,QAAQ,EAAA,EAC1B,KAAK,EAAE;YACL,GAAG;YACH,UAAU;YACV,SAAS;YACT,KAAK;YACL,IAAI;YACJ,QAAQ;YACR,OAAO;AACR,SAAA,EAAA,QAAA,EAEDA,GAAC,CAAA,IAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAM,GAAA,KAAK,EAAI,CAAA,EAAA,CAClB,EAC9B;AACJ;;;;"}
+{"version":3,"file":"color-picker-root.js","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["'use client';\n\nimport Color, { type ColorLike } from 'color';\nimport {\n  ComponentPropsWithoutRef,\n  createContext,\n  useCallback,\n  useContext,\n  useState\n} from 'react';\nimport { Flex } from '../flex';\nimport { ColorObject, ModeType, getColorString } from './utils';\n\ntype ColorPickerContextValue = {\n  hue: number;\n  saturation: number;\n  lightness: number;\n  alpha: number;\n  mode: ModeType;\n  setColor: (color: Partial<ColorObject>) => void;\n  setMode: (mode: ModeType) => void;\n};\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(\n  undefined\n);\n\nexport const useColorPicker = () => {\n  const context = useContext(ColorPickerContext);\n  if (!context) {\n    throw new Error('useColorPicker must be used within a ColorPickerProvider');\n  }\n  return context;\n};\n\nexport interface ColorPickerProps\n  extends Omit<ComponentPropsWithoutRef<typeof Flex>, 'defaultValue'> {\n  value?: ColorLike;\n  defaultValue?: ColorLike;\n  onValueChange?: (value: string, mode: string) => void;\n  defaultMode?: ModeType;\n  mode?: ModeType;\n  onModeChange?: (mode: ModeType) => void;\n}\nexport const ColorPickerRoot = ({\n  value,\n  defaultValue = '#ffffff',\n  onValueChange,\n  defaultMode = 'hex',\n  mode: providedMode,\n  onModeChange,\n  ...props\n}: ColorPickerProps) => {\n  const providedColor = value && (Color(value).hsl().object() as ColorObject);\n\n  const [internalColor, setInternalColor] = useState(\n    Color(defaultValue).hsl().object() as ColorObject\n  );\n  const [internalMode, setInternalMode] = useState(defaultMode);\n\n  const hue = providedColor ? providedColor.h : internalColor.h;\n  const saturation = providedColor ? providedColor.s : internalColor.s;\n  const lightness = providedColor ? providedColor.l : internalColor.l;\n  const alpha =\n    (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;\n\n  const mode = providedMode ?? internalMode;\n\n  const setColor = useCallback<ColorPickerContextValue['setColor']>(\n    value => {\n      setInternalColor(_color => {\n        const updatedColor = { ..._color, ...value };\n\n        if (!onValueChange) return updatedColor;\n\n        const color = Color.hsl(\n          updatedColor.h,\n          updatedColor.s,\n          updatedColor.l,\n          updatedColor?.alpha ?? 1\n        );\n\n        onValueChange(getColorString(color, mode), mode);\n\n        return updatedColor;\n      });\n    },\n    [mode, onValueChange]\n  );\n\n  const setMode = useCallback<ColorPickerContextValue['setMode']>(\n    value => {\n      setInternalMode(value);\n      onModeChange?.(value);\n    },\n    [onModeChange]\n  );\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        hue,\n        saturation,\n        lightness,\n        alpha,\n        mode,\n        setColor,\n        setMode\n      }}\n    >\n      <Flex direction='column' gap={4} {...props} />\n    </ColorPickerContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAuBA;AAIO;AACL;;AAEE;;AAEF;AACF;AAWO;AASL;AAEA;;AAKA;AACA;AACA;AACA;AAGA;AAEA;;;AAKM;AAAoB;;;AAWpB;AACF;AACF;AAIF;;AAGI;AACF;AAIF;;;;;;;;AAUK;AAKP;;"}

package/dist/components/command/command.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -11,7 +12,7 @@ var command_module = require('./command.module.css.cjs');
 
 const command = index$1.cva(command_module.default.command);
 const CommandRoot = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(index.Command, { ref: ref, className: command({ className }), ...props })));
-CommandRoot.displayName = index.Command.displayName;
+CommandRoot.displayName = index.Command?.displayName;
 const CommandDialog = ({ children, ...props }) => {
     return (jsxRuntime.jsx(dialog.Dialog, { ...props, children: jsxRuntime.jsx(dialog.Dialog.Content, { style: { overflow: 'hidden', padding: '0' }, children: jsxRuntime.jsx(Command, { className: command_module.default.dialogcommand, children: children }) }) }));
 };

package/dist/components/command/command.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"command.cjs","sources":["../../../components/command/command.tsx"],"sourcesContent":["import { MagnifyingGlassIcon } from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport React from 'react';\n\nimport { Dialog } from '../dialog';\nimport { Flex } from '../flex';\nimport styles from './command.module.css';\n\nconst command = cva(styles.command);\nconst CommandRoot = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive ref={ref} className={command({ className })} {...props} />\n));\nCommandRoot.displayName = CommandPrimitive.displayName;\n\ninterface CommandDialogProps extends DialogPrimitive.DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <Dialog.Content style={{ overflow: 'hidden', padding: '0' }}>\n        <Command className={styles.dialogcommand}>{children}</Command>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n\nconst input = cva(styles.input);\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <Flex\n    align='center'\n    gap='small'\n    cmdk-input-wrapper=''\n    className={styles.inputWrapper}\n  >\n    <MagnifyingGlassIcon className={styles.inputIcon} width={16} height={16} />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={input({ className })}\n      {...props}\n    />\n  </Flex>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst list = cva(styles.list);\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List ref={ref} className={list({ className })} {...props} />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className={styles.empty} {...props} />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst group = cva(styles.group);\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={group({ className })}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst separator = cva(styles.separator);\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={separator({ className })}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst item = cva(styles.item);\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item ref={ref} className={item({ className })} {...props} />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst shortcut = cva(styles.shortcut);\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={shortcut({ className })} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport const Command: any = Object.assign(CommandRoot, {\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n  Separator: CommandSeparator\n});\n"],"names":["cva","styles","_jsx","CommandPrimitive","Dialog","_jsxs","Flex","MagnifyingGlassIcon"],"mappings":"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"}
+{"version":3,"file":"command.cjs","sources":["../../../components/command/command.tsx"],"sourcesContent":["'use client';\n\nimport { MagnifyingGlassIcon } from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport React from 'react';\n\nimport { Dialog } from '../dialog';\nimport { Flex } from '../flex';\nimport styles from './command.module.css';\n\nconst command = cva(styles.command);\nconst CommandRoot = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive ref={ref} className={command({ className })} {...props} />\n));\nCommandRoot.displayName = CommandPrimitive?.displayName;\n\ninterface CommandDialogProps extends DialogPrimitive.DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <Dialog.Content style={{ overflow: 'hidden', padding: '0' }}>\n        <Command className={styles.dialogcommand}>{children}</Command>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n\nconst input = cva(styles.input);\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <Flex\n    align='center'\n    gap='small'\n    cmdk-input-wrapper=''\n    className={styles.inputWrapper}\n  >\n    <MagnifyingGlassIcon className={styles.inputIcon} width={16} height={16} />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={input({ className })}\n      {...props}\n    />\n  </Flex>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst list = cva(styles.list);\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List ref={ref} className={list({ className })} {...props} />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className={styles.empty} {...props} />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst group = cva(styles.group);\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={group({ className })}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst separator = cva(styles.separator);\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={separator({ className })}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst item = cva(styles.item);\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item ref={ref} className={item({ className })} {...props} />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst shortcut = cva(styles.shortcut);\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={shortcut({ className })} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport const Command: any = Object.assign(CommandRoot, {\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n  Separator: CommandSeparator\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA;AACA;AAMA;AAIA;AACE;AAOF;AAEA;AACA;AAmBA;AAEA;AACA;AAOA;AAEA;AAOA;AAEA;AACA;AAWA;AAEA;AACA;AAUA;AAEA;AACA;AAOA;AAEA;AACA;AAIE;AACF;AACA;;AAGE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/components/command/command.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../components/command/command.tsx"],"names":[],"mappings":"AAsHA,eAAO,MAAM,OAAO,EAAE,GASpB,CAAC"}
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../components/command/command.tsx"],"names":[],"mappings":"AAwHA,eAAO,MAAM,OAAO,EAAE,GASpB,CAAC"}

package/dist/components/command/command.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { MagnifyingGlassIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
 import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
@@ -9,7 +10,7 @@ import styles from './command.module.css.js';
 
 const command = cva(styles.command);
 const CommandRoot = React__default.forwardRef(({ className, ...props }, ref) => (jsx(_e, { ref: ref, className: command({ className }), ...props })));
-CommandRoot.displayName = _e.displayName;
+CommandRoot.displayName = _e?.displayName;
 const CommandDialog = ({ children, ...props }) => {
     return (jsx(Dialog, { ...props, children: jsx(Dialog.Content, { style: { overflow: 'hidden', padding: '0' }, children: jsx(Command, { className: styles.dialogcommand, children: children }) }) }));
 };

package/dist/components/command/command.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.js","sources":["../../../components/command/command.tsx"],"sourcesContent":["import { MagnifyingGlassIcon } from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport React from 'react';\n\nimport { Dialog } from '../dialog';\nimport { Flex } from '../flex';\nimport styles from './command.module.css';\n\nconst command = cva(styles.command);\nconst CommandRoot = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive ref={ref} className={command({ className })} {...props} />\n));\nCommandRoot.displayName = CommandPrimitive.displayName;\n\ninterface CommandDialogProps extends DialogPrimitive.DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <Dialog.Content style={{ overflow: 'hidden', padding: '0' }}>\n        <Command className={styles.dialogcommand}>{children}</Command>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n\nconst input = cva(styles.input);\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <Flex\n    align='center'\n    gap='small'\n    cmdk-input-wrapper=''\n    className={styles.inputWrapper}\n  >\n    <MagnifyingGlassIcon className={styles.inputIcon} width={16} height={16} />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={input({ className })}\n      {...props}\n    />\n  </Flex>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst list = cva(styles.list);\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List ref={ref} className={list({ className })} {...props} />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className={styles.empty} {...props} />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst group = cva(styles.group);\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={group({ className })}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst separator = cva(styles.separator);\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={separator({ className })}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst item = cva(styles.item);\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item ref={ref} className={item({ className })} {...props} />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst shortcut = cva(styles.shortcut);\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={shortcut({ className })} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport const Command: any = Object.assign(CommandRoot, {\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n  Separator: CommandSeparator\n});\n"],"names":["React","_jsx","CommandPrimitive","_jsxs"],"mappings":"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"}
+{"version":3,"file":"command.js","sources":["../../../components/command/command.tsx"],"sourcesContent":["'use client';\n\nimport { MagnifyingGlassIcon } from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport React from 'react';\n\nimport { Dialog } from '../dialog';\nimport { Flex } from '../flex';\nimport styles from './command.module.css';\n\nconst command = cva(styles.command);\nconst CommandRoot = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive ref={ref} className={command({ className })} {...props} />\n));\nCommandRoot.displayName = CommandPrimitive?.displayName;\n\ninterface CommandDialogProps extends DialogPrimitive.DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <Dialog.Content style={{ overflow: 'hidden', padding: '0' }}>\n        <Command className={styles.dialogcommand}>{children}</Command>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n\nconst input = cva(styles.input);\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <Flex\n    align='center'\n    gap='small'\n    cmdk-input-wrapper=''\n    className={styles.inputWrapper}\n  >\n    <MagnifyingGlassIcon className={styles.inputIcon} width={16} height={16} />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={input({ className })}\n      {...props}\n    />\n  </Flex>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst list = cva(styles.list);\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List ref={ref} className={list({ className })} {...props} />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className={styles.empty} {...props} />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst group = cva(styles.group);\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={group({ className })}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst separator = cva(styles.separator);\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={separator({ className })}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst item = cva(styles.item);\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item ref={ref} className={item({ className })} {...props} />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst shortcut = cva(styles.shortcut);\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={shortcut({ className })} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport const Command: any = Object.assign(CommandRoot, {\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n  Separator: CommandSeparator\n});\n"],"names":[],"mappings":";;;;;;;;;;AAYA;AACA;AAMA;AAIA;AACE;AAOF;AAEA;AACA;AAmBA;AAEA;AACA;AAOA;AAEA;AAOA;AAEA;AACA;AAWA;AAEA;AACA;AAUA;AAEA;AACA;AAOA;AAEA;AACA;AAIE;AACF;AACA;;AAGE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/components/copy-button/copy-button.cjs

@@ -1,10 +1,11 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var useCopyToClipboard = require('../../hooks/useCopyToClipboard.cjs');
 var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
-var checkCircleFilled = require('../../icons/assets/check-circle-filled.svg.cjs');
 var React = require('react');
+var useCopyToClipboard = require('../../hooks/useCopyToClipboard.cjs');
+var checkCircleFilled = require('../../icons/assets/check-circle-filled.svg.cjs');
 var iconButton = require('../icon-button/icon-button.cjs');
 
 const CopyButton = ({ text, resetTimeout = 1000, resetIcon = true, ...props }) => {
@@ -21,7 +22,7 @@ const CopyButton = ({ text, resetTimeout = 1000, resetIcon = true, ...props }) =
             }
         }
     }
-    return (jsxRuntime.jsx(iconButton.IconButton, { ...props, onClick: onCopy, "data-test-id": "copy-button", children: isCopied ? (jsxRuntime.jsx(checkCircleFilled.ReactComponent, { color: "var(--rs-color-foreground-success-primary)" })) : (jsxRuntime.jsx(reactIcons_esm.CopyIcon, {})) }));
+    return (jsxRuntime.jsx(iconButton.IconButton, { ...props, onClick: onCopy, "data-test-id": 'copy-button', children: isCopied ? (jsxRuntime.jsx(checkCircleFilled.ReactComponent, { color: 'var(--rs-color-foreground-success-primary)' })) : (jsxRuntime.jsx(reactIcons_esm.CopyIcon, {})) }));
 };
 
 exports.CopyButton = CopyButton;

package/dist/components/copy-button/copy-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.cjs","sources":["../../../components/copy-button/copy-button.tsx"],"sourcesContent":["import { useCopyToClipboard } from \"~/hooks/useCopyToClipboard\";\nimport { CopyIcon } from \"@radix-ui/react-icons\";\nimport { CheckCircleFilledIcon } from \"~/icons\";\nimport { useState } from \"react\";\nimport { IconButtonProps, IconButton } from \"../icon-button/icon-button\";\n\ninterface CopyButtonProps extends IconButtonProps {\n  text: string;\n  resetTimeout?: number;\n  resetIcon?: boolean;\n}\n\nexport const CopyButton = ({\n  text,\n  resetTimeout = 1000,\n  resetIcon = true,\n  ...props\n}: CopyButtonProps) => {\n  const { copy } = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n\n  async function onCopy() {\n    const res = await copy(text);\n    if (res) {\n      setIsCopied(true);\n      if (resetIcon) {\n        setTimeout(() => {\n          setIsCopied(false);\n        }, resetTimeout);\n      }\n    }\n  }\n\n  return (\n    <IconButton {...props} onClick={onCopy} data-test-id=\"copy-button\">\n      {isCopied ? (\n        <CheckCircleFilledIcon\n          color={\"var(--rs-color-foreground-success-primary)\"}\n        />\n      ) : (\n        <CopyIcon />\n      )}\n    </IconButton>\n  );\n};\n"],"names":["useCopyToClipboard","useState","_jsx","IconButton","CheckCircleFilledIcon","CopyIcon"],"mappings":";;;;;;;;;MAYa,UAAU,GAAG,CAAC,EACzB,IAAI,EACJ,YAAY,GAAG,IAAI,EACnB,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EACQ,KAAI;AACpB,IAAA,MAAM,EAAE,IAAI,EAAE,GAAGA,qCAAkB,EAAE,CAAC;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AAEhD,IAAA,eAAe,MAAM,GAAA;AACnB,QAAA,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,GAAG,EAAE;YACP,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,IAAI,SAAS,EAAE;gBACb,UAAU,CAAC,MAAK;oBACd,WAAW,CAAC,KAAK,CAAC,CAAC;iBACpB,EAAE,YAAY,CAAC,CAAC;aAClB;SACF;KACF;AAED,IAAA,QACEC,cAAA,CAACC,qBAAU,EAAA,EAAA,GAAK,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAe,aAAa,EAAA,QAAA,EAC/D,QAAQ,IACPD,cAAC,CAAAE,gCAAqB,IACpB,KAAK,EAAE,4CAA4C,EAAA,CACnD,KAEFF,eAACG,uBAAQ,EAAA,EAAA,CAAG,CACb,EAAA,CACU,EACb;AACJ;;;;"}
+{"version":3,"file":"copy-button.cjs","sources":["../../../components/copy-button/copy-button.tsx"],"sourcesContent":["'use client';\n\nimport { CopyIcon } from '@radix-ui/react-icons';\nimport { useState } from 'react';\nimport { useCopyToClipboard } from '~/hooks/useCopyToClipboard';\nimport { CheckCircleFilledIcon } from '~/icons';\nimport { IconButton, IconButtonProps } from '../icon-button/icon-button';\n\ninterface CopyButtonProps extends IconButtonProps {\n  text: string;\n  resetTimeout?: number;\n  resetIcon?: boolean;\n}\n\nexport const CopyButton = ({\n  text,\n  resetTimeout = 1000,\n  resetIcon = true,\n  ...props\n}: CopyButtonProps) => {\n  const { copy } = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n\n  async function onCopy() {\n    const res = await copy(text);\n    if (res) {\n      setIsCopied(true);\n      if (resetIcon) {\n        setTimeout(() => {\n          setIsCopied(false);\n        }, resetTimeout);\n      }\n    }\n  }\n\n  return (\n    <IconButton {...props} onClick={onCopy} data-test-id='copy-button'>\n      {isCopied ? (\n        <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />\n      ) : (\n        <CopyIcon />\n      )}\n    </IconButton>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAoBE;;AAGA;AACE;;;;;;;;;;AAWF;AASF;;"}

package/dist/components/copy-button/copy-button.d.ts

@@ -1,4 +1,4 @@
-import { IconButtonProps } from "../icon-button/icon-button";
+import { IconButtonProps } from '../icon-button/icon-button';
 interface CopyButtonProps extends IconButtonProps {
     text: string;
     resetTimeout?: number;

package/dist/components/copy-button/copy-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../components/copy-button/copy-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAc,MAAM,4BAA4B,CAAC;AAEzE,UAAU,eAAgB,SAAQ,eAAe;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,gDAKpB,eAAe,4CA2BjB,CAAC"}
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../components/copy-button/copy-button.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAc,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAEzE,UAAU,eAAgB,SAAQ,eAAe;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,gDAKpB,eAAe,4CAyBjB,CAAC"}

package/dist/components/copy-button/copy-button.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.js';
 import { CopyIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
-import { ReactComponent as SvgCheckCircleFilled } from '../../icons/assets/check-circle-filled.svg.js';
 import { useState } from 'react';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.js';
+import { ReactComponent as SvgCheckCircleFilled } from '../../icons/assets/check-circle-filled.svg.js';
 import { IconButton } from '../icon-button/icon-button.js';
 
 const CopyButton = ({ text, resetTimeout = 1000, resetIcon = true, ...props }) => {
@@ -19,7 +20,7 @@ const CopyButton = ({ text, resetTimeout = 1000, resetIcon = true, ...props }) =
             }
         }
     }
-    return (jsx(IconButton, { ...props, onClick: onCopy, "data-test-id": "copy-button", children: isCopied ? (jsx(SvgCheckCircleFilled, { color: "var(--rs-color-foreground-success-primary)" })) : (jsx(CopyIcon, {})) }));
+    return (jsx(IconButton, { ...props, onClick: onCopy, "data-test-id": 'copy-button', children: isCopied ? (jsx(SvgCheckCircleFilled, { color: 'var(--rs-color-foreground-success-primary)' })) : (jsx(CopyIcon, {})) }));
 };
 
 export { CopyButton };

package/dist/components/copy-button/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","sources":["../../../components/copy-button/copy-button.tsx"],"sourcesContent":["import { useCopyToClipboard } from \"~/hooks/useCopyToClipboard\";\nimport { CopyIcon } from \"@radix-ui/react-icons\";\nimport { CheckCircleFilledIcon } from \"~/icons\";\nimport { useState } from \"react\";\nimport { IconButtonProps, IconButton } from \"../icon-button/icon-button\";\n\ninterface CopyButtonProps extends IconButtonProps {\n  text: string;\n  resetTimeout?: number;\n  resetIcon?: boolean;\n}\n\nexport const CopyButton = ({\n  text,\n  resetTimeout = 1000,\n  resetIcon = true,\n  ...props\n}: CopyButtonProps) => {\n  const { copy } = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n\n  async function onCopy() {\n    const res = await copy(text);\n    if (res) {\n      setIsCopied(true);\n      if (resetIcon) {\n        setTimeout(() => {\n          setIsCopied(false);\n        }, resetTimeout);\n      }\n    }\n  }\n\n  return (\n    <IconButton {...props} onClick={onCopy} data-test-id=\"copy-button\">\n      {isCopied ? (\n        <CheckCircleFilledIcon\n          color={\"var(--rs-color-foreground-success-primary)\"}\n        />\n      ) : (\n        <CopyIcon />\n      )}\n    </IconButton>\n  );\n};\n"],"names":["_jsx","CheckCircleFilledIcon"],"mappings":";;;;;;;MAYa,UAAU,GAAG,CAAC,EACzB,IAAI,EACJ,YAAY,GAAG,IAAI,EACnB,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EACQ,KAAI;AACpB,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEhD,IAAA,eAAe,MAAM,GAAA;AACnB,QAAA,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,GAAG,EAAE;YACP,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,IAAI,SAAS,EAAE;gBACb,UAAU,CAAC,MAAK;oBACd,WAAW,CAAC,KAAK,CAAC,CAAC;iBACpB,EAAE,YAAY,CAAC,CAAC;aAClB;SACF;KACF;AAED,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAe,aAAa,EAAA,QAAA,EAC/D,QAAQ,IACPA,GAAC,CAAAC,oBAAqB,IACpB,KAAK,EAAE,4CAA4C,EAAA,CACnD,KAEFD,IAAC,QAAQ,EAAA,EAAA,CAAG,CACb,EAAA,CACU,EACb;AACJ;;;;"}
+{"version":3,"file":"copy-button.js","sources":["../../../components/copy-button/copy-button.tsx"],"sourcesContent":["'use client';\n\nimport { CopyIcon } from '@radix-ui/react-icons';\nimport { useState } from 'react';\nimport { useCopyToClipboard } from '~/hooks/useCopyToClipboard';\nimport { CheckCircleFilledIcon } from '~/icons';\nimport { IconButton, IconButtonProps } from '../icon-button/icon-button';\n\ninterface CopyButtonProps extends IconButtonProps {\n  text: string;\n  resetTimeout?: number;\n  resetIcon?: boolean;\n}\n\nexport const CopyButton = ({\n  text,\n  resetTimeout = 1000,\n  resetIcon = true,\n  ...props\n}: CopyButtonProps) => {\n  const { copy } = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n\n  async function onCopy() {\n    const res = await copy(text);\n    if (res) {\n      setIsCopied(true);\n      if (resetIcon) {\n        setTimeout(() => {\n          setIsCopied(false);\n        }, resetTimeout);\n      }\n    }\n  }\n\n  return (\n    <IconButton {...props} onClick={onCopy} data-test-id='copy-button'>\n      {isCopied ? (\n        <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />\n      ) : (\n        <CopyIcon />\n      )}\n    </IconButton>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBE;;AAGA;AACE;;;;;;;;;;AAWF;AASF;;"}

package/dist/components/data-table/components/content.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/components/data-table/components/content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"content.cjs","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["import { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef\n} from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={columnDef.classNames?.header}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  lastRowRef?: ForwardedRef<HTMLTableRowElement>;\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n}) {\n  return (\n    <Table.SectionHeader colSpan={colSpan}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nconst Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(\n  (props, lastRowRef) => {\n    const { rows = [], onRowClick, classNames } = props;\n    return (\n      <>\n        {rows?.map((row, index) => {\n          const isSelected = row.getIsSelected();\n          const cells = row.getVisibleCells() || [];\n          const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();\n          const isLastRow = index === rows.length - 1;\n          const rowKey = row.id + '-' + index;\n          return isSectionHeadingRow ? (\n            <GroupHeader\n              key={rowKey}\n              colSpan={cells.length}\n              data={row.original as GroupedData<unknown>}\n            />\n          ) : (\n            <Table.Row\n              key={rowKey}\n              className={cx(\n                styles['row'],\n                onRowClick ? styles['clickable'] : '',\n                classNames?.row\n              )}\n              data-state={isSelected && 'selected'}\n              ref={isLastRow ? lastRowRef : undefined}\n              onClick={() => onRowClick?.(row.original)}\n            >\n              {cells.map(cell => {\n                const columnDef = cell.column.columnDef as DataTableColumnDef<\n                  unknown,\n                  unknown\n                >;\n                return (\n                  <Table.Cell\n                    key={cell.id}\n                    className={cx(styles['cell'], columnDef.classNames?.cell)}\n                    style={columnDef.styles?.cell}\n                  >\n                    {flexRender(columnDef.cell, cell.getContext())}\n                  </Table.Cell>\n                );\n              })}\n            </Table.Row>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3\n  } = useDataTable();\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const handleObserver = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const target = entries[0];\n      if (target.isIntersecting && !isLoading) {\n        loadMoreData();\n      }\n    },\n    [loadMoreData, isLoading]\n  );\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    const lastRow = lastRowRef.current;\n    if (lastRow) {\n      observerRef.current.observe(lastRow);\n    }\n\n    return () => {\n      if (observerRef.current && lastRow) {\n        observerRef.current.unobserve(lastRow);\n        observerRef.current.disconnect();\n      }\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  return (\n    <div className={classNames.root}>\n      <Table className={classNames.table}>\n        <Headers headerGroups={headerGroups} className={classNames.header} />\n        <Table.Body className={classNames.body}>\n          {rows?.length || isLoading ? (\n            <>\n              <Rows\n                rows={rows}\n                ref={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell colSpan={visibleColumnsLength}>\n                {emptyState || <DefaultEmptyComponent />}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":["_jsx","Table","flexRender","Skeleton","_jsxs","Flex","Badge","forwardRef","_Fragment","index","cx","styles","EmptyState","TableIcon","table","useDataTable","useRef","useCallback","useEffect"],"mappings":"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"}
+{"version":3,"file":"content.cjs","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef\n} from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={columnDef.classNames?.header}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  lastRowRef?: ForwardedRef<HTMLTableRowElement>;\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n}) {\n  return (\n    <Table.SectionHeader colSpan={colSpan}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nconst Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(\n  (props, lastRowRef) => {\n    const { rows = [], onRowClick, classNames } = props;\n    return (\n      <>\n        {rows?.map((row, index) => {\n          const isSelected = row.getIsSelected();\n          const cells = row.getVisibleCells() || [];\n          const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();\n          const isLastRow = index === rows.length - 1;\n          const rowKey = row.id + '-' + index;\n          return isSectionHeadingRow ? (\n            <GroupHeader\n              key={rowKey}\n              colSpan={cells.length}\n              data={row.original as GroupedData<unknown>}\n            />\n          ) : (\n            <Table.Row\n              key={rowKey}\n              className={cx(\n                styles['row'],\n                onRowClick ? styles['clickable'] : '',\n                classNames?.row\n              )}\n              data-state={isSelected && 'selected'}\n              ref={isLastRow ? lastRowRef : undefined}\n              onClick={() => onRowClick?.(row.original)}\n            >\n              {cells.map(cell => {\n                const columnDef = cell.column.columnDef as DataTableColumnDef<\n                  unknown,\n                  unknown\n                >;\n                return (\n                  <Table.Cell\n                    key={cell.id}\n                    className={cx(styles['cell'], columnDef.classNames?.cell)}\n                    style={columnDef.styles?.cell}\n                  >\n                    {flexRender(columnDef.cell, cell.getContext())}\n                  </Table.Cell>\n                );\n              })}\n            </Table.Row>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3\n  } = useDataTable();\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const handleObserver = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const target = entries[0];\n      if (target.isIntersecting && !isLoading) {\n        loadMoreData();\n      }\n    },\n    [loadMoreData, isLoading]\n  );\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    const lastRow = lastRowRef.current;\n    if (lastRow) {\n      observerRef.current.observe(lastRow);\n    }\n\n    return () => {\n      if (observerRef.current && lastRow) {\n        observerRef.current.unobserve(lastRow);\n        observerRef.current.disconnect();\n      }\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  return (\n    <div className={classNames.root}>\n      <Table className={classNames.table}>\n        <Headers headerGroups={headerGroups} className={classNames.header} />\n        <Table.Body className={classNames.body}>\n          {rows?.length || isLoading ? (\n            <>\n              <Rows\n                rows={rows}\n                ref={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell colSpan={visibleColumnsLength}>\n                {emptyState || <DefaultEmptyComponent />}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA2BA;AAOE;AAKU;;;AAmBZ;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;;AAMU;;AAEA;;;;AAsBM;;AAaF;;AAMZ;AAGF;AAIM;AAIJ;AAQA;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;AAKF;;;AAiCF;;"}

package/dist/components/data-table/components/content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/content.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AA8I7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,UAAe,EAChB,EAAE,qBAAqB,2CAoFvB"}
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/content.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AA8I7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,UAAe,EAChB,EAAE,qBAAqB,2CAoFvB"}

package/dist/components/data-table/components/content.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { TableIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
 import { flexRender } from '../../../node_modules/.pnpm/@tanstack_react-table@8.9.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@tanstack/react-table/build/lib/index.js';

package/dist/components/data-table/components/content.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.js","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["import { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef\n} from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={columnDef.classNames?.header}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  lastRowRef?: ForwardedRef<HTMLTableRowElement>;\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n}) {\n  return (\n    <Table.SectionHeader colSpan={colSpan}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nconst Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(\n  (props, lastRowRef) => {\n    const { rows = [], onRowClick, classNames } = props;\n    return (\n      <>\n        {rows?.map((row, index) => {\n          const isSelected = row.getIsSelected();\n          const cells = row.getVisibleCells() || [];\n          const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();\n          const isLastRow = index === rows.length - 1;\n          const rowKey = row.id + '-' + index;\n          return isSectionHeadingRow ? (\n            <GroupHeader\n              key={rowKey}\n              colSpan={cells.length}\n              data={row.original as GroupedData<unknown>}\n            />\n          ) : (\n            <Table.Row\n              key={rowKey}\n              className={cx(\n                styles['row'],\n                onRowClick ? styles['clickable'] : '',\n                classNames?.row\n              )}\n              data-state={isSelected && 'selected'}\n              ref={isLastRow ? lastRowRef : undefined}\n              onClick={() => onRowClick?.(row.original)}\n            >\n              {cells.map(cell => {\n                const columnDef = cell.column.columnDef as DataTableColumnDef<\n                  unknown,\n                  unknown\n                >;\n                return (\n                  <Table.Cell\n                    key={cell.id}\n                    className={cx(styles['cell'], columnDef.classNames?.cell)}\n                    style={columnDef.styles?.cell}\n                  >\n                    {flexRender(columnDef.cell, cell.getContext())}\n                  </Table.Cell>\n                );\n              })}\n            </Table.Row>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3\n  } = useDataTable();\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const handleObserver = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const target = entries[0];\n      if (target.isIntersecting && !isLoading) {\n        loadMoreData();\n      }\n    },\n    [loadMoreData, isLoading]\n  );\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    const lastRow = lastRowRef.current;\n    if (lastRow) {\n      observerRef.current.observe(lastRow);\n    }\n\n    return () => {\n      if (observerRef.current && lastRow) {\n        observerRef.current.unobserve(lastRow);\n        observerRef.current.disconnect();\n      }\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  return (\n    <div className={classNames.root}>\n      <Table className={classNames.table}>\n        <Headers headerGroups={headerGroups} className={classNames.header} />\n        <Table.Body className={classNames.body}>\n          {rows?.length || isLoading ? (\n            <>\n              <Rows\n                rows={rows}\n                ref={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell colSpan={visibleColumnsLength}>\n                {emptyState || <DefaultEmptyComponent />}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"content.js","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef\n} from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={columnDef.classNames?.header}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  lastRowRef?: ForwardedRef<HTMLTableRowElement>;\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n}) {\n  return (\n    <Table.SectionHeader colSpan={colSpan}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nconst Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(\n  (props, lastRowRef) => {\n    const { rows = [], onRowClick, classNames } = props;\n    return (\n      <>\n        {rows?.map((row, index) => {\n          const isSelected = row.getIsSelected();\n          const cells = row.getVisibleCells() || [];\n          const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();\n          const isLastRow = index === rows.length - 1;\n          const rowKey = row.id + '-' + index;\n          return isSectionHeadingRow ? (\n            <GroupHeader\n              key={rowKey}\n              colSpan={cells.length}\n              data={row.original as GroupedData<unknown>}\n            />\n          ) : (\n            <Table.Row\n              key={rowKey}\n              className={cx(\n                styles['row'],\n                onRowClick ? styles['clickable'] : '',\n                classNames?.row\n              )}\n              data-state={isSelected && 'selected'}\n              ref={isLastRow ? lastRowRef : undefined}\n              onClick={() => onRowClick?.(row.original)}\n            >\n              {cells.map(cell => {\n                const columnDef = cell.column.columnDef as DataTableColumnDef<\n                  unknown,\n                  unknown\n                >;\n                return (\n                  <Table.Cell\n                    key={cell.id}\n                    className={cx(styles['cell'], columnDef.classNames?.cell)}\n                    style={columnDef.styles?.cell}\n                  >\n                    {flexRender(columnDef.cell, cell.getContext())}\n                  </Table.Cell>\n                );\n              })}\n            </Table.Row>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3\n  } = useDataTable();\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const handleObserver = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const target = entries[0];\n      if (target.isIntersecting && !isLoading) {\n        loadMoreData();\n      }\n    },\n    [loadMoreData, isLoading]\n  );\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    const lastRow = lastRowRef.current;\n    if (lastRow) {\n      observerRef.current.observe(lastRow);\n    }\n\n    return () => {\n      if (observerRef.current && lastRow) {\n        observerRef.current.unobserve(lastRow);\n        observerRef.current.disconnect();\n      }\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  return (\n    <div className={classNames.root}>\n      <Table className={classNames.table}>\n        <Headers headerGroups={headerGroups} className={classNames.header} />\n        <Table.Body className={classNames.body}>\n          {rows?.length || isLoading ? (\n            <>\n              <Rows\n                rows={rows}\n                ref={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell colSpan={visibleColumnsLength}>\n                {emptyState || <DefaultEmptyComponent />}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA2BA;AAOE;AAKU;;;AAmBZ;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;;AAMU;;AAEA;;;;AAsBM;;AAaF;;AAMZ;AAGF;AAIM;AAIJ;AAQA;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;AAKF;;;AAiCF;;"}

package/dist/components/data-table/components/display-properties.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -5,9 +6,9 @@ var chip = require('../../chip/chip.cjs');
 var flex = require('../../flex/flex.cjs');
 var text = require('../../text/text.cjs');
 
-function DisplayProperties({ columns, }) {
-    const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);
-    return (jsxRuntime.jsxs(flex.Flex, { direction: "column", gap: 3, children: [jsxRuntime.jsx(text.Text, { children: "Display Properties" }), jsxRuntime.jsx(flex.Flex, { gap: 3, wrap: "wrap", children: hidableColumns.map((column) => (jsxRuntime.jsx(chip.Chip, { variant: "outline", size: "small", color: column.getIsVisible() ? "accent" : "neutral", onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
+function DisplayProperties({ columns }) {
+    const hidableColumns = columns?.filter(col => col.columnDef.enableHiding);
+    return (jsxRuntime.jsxs(flex.Flex, { direction: 'column', gap: 3, children: [jsxRuntime.jsx(text.Text, { children: "Display Properties" }), jsxRuntime.jsx(flex.Flex, { gap: 3, wrap: 'wrap', children: hidableColumns.map(column => (jsxRuntime.jsx(chip.Chip, { variant: 'outline', size: 'small', color: column.getIsVisible() ? 'accent' : 'neutral', onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
 }
 
 exports.DisplayProperties = DisplayProperties;

package/dist/components/data-table/components/display-properties.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"display-properties.cjs","sources":["../../../../components/data-table/components/display-properties.tsx"],"sourcesContent":["import { Chip } from \"../../chip\";\nimport { Flex } from \"../../flex\";\nimport { Text } from \"../../text\";\nimport { DataTableColumn } from \"../data-table.types\";\n\nexport function DisplayProperties<TData, TValue>({\n  columns,\n}: {\n  columns: DataTableColumn<TData, TValue>[];\n}) {\n  const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);\n\n  return (\n    <Flex direction={\"column\"} gap={3}>\n      <Text>Display Properties</Text>\n      <Flex gap={3} wrap={\"wrap\"}>\n        {hidableColumns.map((column) => (\n          <Chip\n            key={column.id}\n            variant=\"outline\"\n            size=\"small\"\n            color={column.getIsVisible() ? \"accent\" : \"neutral\"}\n            onClick={() => column.toggleVisibility()}\n          >\n            {(column.columnDef.header as string) || column.id}\n          </Chip>\n        ))}\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":["_jsxs","Flex","_jsx","Text","Chip"],"mappings":";;;;;;;AAKgB,SAAA,iBAAiB,CAAgB,EAC/C,OAAO,GAGR,EAAA;AACC,IAAA,MAAM,cAAc,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE5E,QACEA,gBAACC,SAAI,EAAA,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAC/B,QAAA,EAAA,CAAAC,cAAA,CAACC,SAAI,EAA0B,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAA,EAC/BD,eAACD,SAAI,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EACvB,QAAA,EAAA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBC,eAACE,SAAI,EAAA,EAEH,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,QAAQ,GAAG,SAAS,EACnD,OAAO,EAAE,MAAM,MAAM,CAAC,gBAAgB,EAAE,EAAA,QAAA,EAEtC,MAAM,CAAC,SAAS,CAAC,MAAiB,IAAI,MAAM,CAAC,EAAE,IAN5C,MAAM,CAAC,EAAE,CAOT,CACR,CAAC,EACG,CAAA,CAAA,EAAA,CACF,EACP;AACJ;;;;"}
+{"version":3,"file":"display-properties.cjs","sources":["../../../../components/data-table/components/display-properties.tsx"],"sourcesContent":["'use client';\n\nimport { Chip } from '../../chip';\nimport { Flex } from '../../flex';\nimport { Text } from '../../text';\nimport { DataTableColumn } from '../data-table.types';\n\nexport function DisplayProperties<TData, TValue>({\n  columns\n}: {\n  columns: DataTableColumn<TData, TValue>[];\n}) {\n  const hidableColumns = columns?.filter(col => col.columnDef.enableHiding);\n\n  return (\n    <Flex direction='column' gap={3}>\n      <Text>Display Properties</Text>\n      <Flex gap={3} wrap='wrap'>\n        {hidableColumns.map(column => (\n          <Chip\n            key={column.id}\n            variant='outline'\n            size='small'\n            color={column.getIsVisible() ? 'accent' : 'neutral'}\n            onClick={() => column.toggleVisibility()}\n          >\n            {(column.columnDef.header as string) || column.id}\n          </Chip>\n        ))}\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAOgB;AAKd;AAEA;AAkBF;;"}

package/dist/components/data-table/components/display-properties.d.ts

@@ -1,5 +1,5 @@
-import { DataTableColumn } from "../data-table.types";
-export declare function DisplayProperties<TData, TValue>({ columns, }: {
+import { DataTableColumn } from '../data-table.types';
+export declare function DisplayProperties<TData, TValue>({ columns }: {
     columns: DataTableColumn<TData, TValue>[];
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=display-properties.d.ts.map

package/dist/components/data-table/components/display-properties.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-properties.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/display-properties.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,EAC/C,OAAO,GACR,EAAE;IACD,OAAO,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;CAC3C,2CAqBA"}
+{"version":3,"file":"display-properties.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/display-properties.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,EAC/C,OAAO,EACR,EAAE;IACD,OAAO,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;CAC3C,2CAqBA"}

package/dist/components/data-table/components/display-properties.js

@@ -1,11 +1,12 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Chip } from '../../chip/chip.js';
 import { Flex } from '../../flex/flex.js';
 import { Text } from '../../text/text.js';
 
-function DisplayProperties({ columns, }) {
-    const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);
-    return (jsxs(Flex, { direction: "column", gap: 3, children: [jsx(Text, { children: "Display Properties" }), jsx(Flex, { gap: 3, wrap: "wrap", children: hidableColumns.map((column) => (jsx(Chip, { variant: "outline", size: "small", color: column.getIsVisible() ? "accent" : "neutral", onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
+function DisplayProperties({ columns }) {
+    const hidableColumns = columns?.filter(col => col.columnDef.enableHiding);
+    return (jsxs(Flex, { direction: 'column', gap: 3, children: [jsx(Text, { children: "Display Properties" }), jsx(Flex, { gap: 3, wrap: 'wrap', children: hidableColumns.map(column => (jsx(Chip, { variant: 'outline', size: 'small', color: column.getIsVisible() ? 'accent' : 'neutral', onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
 }
 
 export { DisplayProperties };

package/dist/components/data-table/components/display-properties.js.map

@@ -1 +1 @@
-{"version":3,"file":"display-properties.js","sources":["../../../../components/data-table/components/display-properties.tsx"],"sourcesContent":["import { Chip } from \"../../chip\";\nimport { Flex } from \"../../flex\";\nimport { Text } from \"../../text\";\nimport { DataTableColumn } from \"../data-table.types\";\n\nexport function DisplayProperties<TData, TValue>({\n  columns,\n}: {\n  columns: DataTableColumn<TData, TValue>[];\n}) {\n  const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);\n\n  return (\n    <Flex direction={\"column\"} gap={3}>\n      <Text>Display Properties</Text>\n      <Flex gap={3} wrap={\"wrap\"}>\n        {hidableColumns.map((column) => (\n          <Chip\n            key={column.id}\n            variant=\"outline\"\n            size=\"small\"\n            color={column.getIsVisible() ? \"accent\" : \"neutral\"}\n            onClick={() => column.toggleVisibility()}\n          >\n            {(column.columnDef.header as string) || column.id}\n          </Chip>\n        ))}\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKgB,SAAA,iBAAiB,CAAgB,EAC/C,OAAO,GAGR,EAAA;AACC,IAAA,MAAM,cAAc,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE5E,QACEA,KAAC,IAAI,EAAA,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAC/B,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAA0B,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAA,EAC/BA,IAAC,IAAI,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EACvB,QAAA,EAAA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,IAAC,IAAI,EAAA,EAEH,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,QAAQ,GAAG,SAAS,EACnD,OAAO,EAAE,MAAM,MAAM,CAAC,gBAAgB,EAAE,EAAA,QAAA,EAEtC,MAAM,CAAC,SAAS,CAAC,MAAiB,IAAI,MAAM,CAAC,EAAE,IAN5C,MAAM,CAAC,EAAE,CAOT,CACR,CAAC,EACG,CAAA,CAAA,EAAA,CACF,EACP;AACJ;;;;"}
+{"version":3,"file":"display-properties.js","sources":["../../../../components/data-table/components/display-properties.tsx"],"sourcesContent":["'use client';\n\nimport { Chip } from '../../chip';\nimport { Flex } from '../../flex';\nimport { Text } from '../../text';\nimport { DataTableColumn } from '../data-table.types';\n\nexport function DisplayProperties<TData, TValue>({\n  columns\n}: {\n  columns: DataTableColumn<TData, TValue>[];\n}) {\n  const hidableColumns = columns?.filter(col => col.columnDef.enableHiding);\n\n  return (\n    <Flex direction='column' gap={3}>\n      <Text>Display Properties</Text>\n      <Flex gap={3} wrap='wrap'>\n        {hidableColumns.map(column => (\n          <Chip\n            key={column.id}\n            variant='outline'\n            size='small'\n            color={column.getIsVisible() ? 'accent' : 'neutral'}\n            onClick={() => column.toggleVisibility()}\n          >\n            {(column.columnDef.header as string) || column.id}\n          </Chip>\n        ))}\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAOgB;AAKd;AAEA;AAkBF;;"}

package/dist/components/data-table/components/display-settings.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/components/data-table/components/display-settings.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"display-settings.cjs","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["import { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\nexport function DisplaySettings<TData, TValue>() {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>\n        <Button\n          variant='outline'\n          color='neutral'\n          size='small'\n          leadingIcon={<MixerHorizontalIcon />}\n        >\n          Display\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["useDataTable","_jsxs","Popover","_jsx","Button","MixerHorizontalIcon","styles","Flex","Ordering","Grouping","defaultGroupOption","DisplayProperties"],"mappings":"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"}
+{"version":3,"file":"display-settings.cjs","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\nexport function DisplaySettings<TData, TValue>() {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>\n        <Button\n          variant='outline'\n          color='neutral'\n          size='small'\n          leadingIcon={<MixerHorizontalIcon />}\n        >\n          Display\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmBE;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAiDF;;"}

package/dist/components/data-table/components/display-settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/display-settings.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,6CAoG5C"}
+{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/display-settings.tsx"],"names":[],"mappings":"AAkBA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,6CAoG5C"}

package/dist/components/data-table/components/display-settings.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { MixerHorizontalIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
 import { Button } from '../../button/button.js';

package/dist/components/data-table/components/display-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"display-settings.js","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["import { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\nexport function DisplaySettings<TData, TValue>() {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>\n        <Button\n          variant='outline'\n          color='neutral'\n          size='small'\n          leadingIcon={<MixerHorizontalIcon />}\n        >\n          Display\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"display-settings.js","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\nexport function DisplaySettings<TData, TValue>() {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>\n        <Button\n          variant='outline'\n          color='neutral'\n          size='small'\n          leadingIcon={<MixerHorizontalIcon />}\n        >\n          Display\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAmBE;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAiDF;;"}

package/dist/components/data-table/components/filters.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/components/data-table/components/filters.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"filters.cjs","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["import { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>\n        {appliedFiltersSet.size > 0 ? (\n          <IconButton size={4}>\n            <FilterIcon />\n          </IconButton>\n        ) : (\n          <Button\n            variant='text'\n            size='small'\n            leadingIcon={<FilterIcon />}\n            color='neutral'\n          >\n            Filter\n          </Button>\n        )}\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>() {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3}>\n      <Flex gap={3}>\n        {appliedFilters.map(filter => (\n          <FilterChip\n            key={filter.name}\n            label={filter.label}\n            value={filter.value}\n            onRemove={() => handleRemoveFilter(filter.name)}\n            onValueChange={value => handleFilterValueChange(filter.name, value)}\n            onOperationChange={operator =>\n              handleFilterOperationChange(\n                filter.name,\n                operator as FilterOperatorTypes\n              )\n            }\n            columnType={filter.filterType}\n            options={filter.options}\n          />\n        ))}\n      </Flex>\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      />\n    </Flex>\n  );\n}\n"],"names":["_jsxs","DropdownMenu","_jsx","IconButton","FilterIcon","Button","useDataTable","useFilters","FilterType","Flex","FilterChip"],"mappings":"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"}
+{"version":3,"file":"filters.cjs","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>\n        {appliedFiltersSet.size > 0 ? (\n          <IconButton size={4}>\n            <FilterIcon />\n          </IconButton>\n        ) : (\n          <Button\n            variant='text'\n            size='small'\n            leadingIcon={<FilterIcon />}\n            color='neutral'\n          >\n            Filter\n          </Button>\n        )}\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>() {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3}>\n      <Flex gap={3}>\n        {appliedFilters.map(filter => (\n          <FilterChip\n            key={filter.name}\n            label={filter.label}\n            value={filter.value}\n            onRemove={() => handleRemoveFilter(filter.name)}\n            onValueChange={value => handleFilterValueChange(filter.name, value)}\n            onOperationChange={operator =>\n              handleFilterOperationChange(\n                filter.name,\n                operator as FilterOperatorTypes\n              )\n            }\n            columnType={filter.filterType}\n            options={filter.options}\n          />\n        ))}\n      </Flex>\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAmBA;;AASE;AAoBQ;;;;AAWV;;;AAIE;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;;AAgCR;;"}