@donotdev/components 0.0.10 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/atomic/Accordion/index.d.ts +2 -16
  2. package/dist/atomic/Accordion/index.d.ts.map +1 -1
  3. package/dist/atomic/Accordion/index.js +4 -25
  4. package/dist/atomic/Alert/index.d.ts.map +1 -1
  5. package/dist/atomic/Alert/index.js +1 -1
  6. package/dist/atomic/Button/index.js +6 -3
  7. package/dist/atomic/Calendar/index.js +1 -1
  8. package/dist/atomic/CallToAction/index.d.ts.map +1 -1
  9. package/dist/atomic/CallToAction/index.js +1 -1
  10. package/dist/atomic/Collapsible/index.d.ts +12 -16
  11. package/dist/atomic/Collapsible/index.d.ts.map +1 -1
  12. package/dist/atomic/Collapsible/index.js +24 -24
  13. package/dist/atomic/Combobox/index.d.ts +9 -47
  14. package/dist/atomic/Combobox/index.d.ts.map +1 -1
  15. package/dist/atomic/Combobox/index.js +135 -87
  16. package/dist/atomic/Dialog/index.d.ts.map +1 -1
  17. package/dist/atomic/Dialog/index.js +1 -1
  18. package/dist/atomic/DropdownMenu/index.js +1 -1
  19. package/dist/atomic/Input/index.d.ts +1 -1
  20. package/dist/atomic/Input/index.d.ts.map +1 -1
  21. package/dist/atomic/Input/index.js +6 -22
  22. package/dist/atomic/Label/FloatingLabel.d.ts +31 -0
  23. package/dist/atomic/Label/FloatingLabel.d.ts.map +1 -0
  24. package/dist/atomic/Label/FloatingLabel.js +34 -0
  25. package/dist/atomic/Label/index.d.ts +5 -1
  26. package/dist/atomic/Label/index.d.ts.map +1 -1
  27. package/dist/atomic/Label/index.js +8 -2
  28. package/dist/atomic/PasswordInput/index.d.ts +9 -10
  29. package/dist/atomic/PasswordInput/index.d.ts.map +1 -1
  30. package/dist/atomic/PasswordInput/index.js +10 -30
  31. package/dist/atomic/Section/index.d.ts +25 -1
  32. package/dist/atomic/Section/index.d.ts.map +1 -1
  33. package/dist/atomic/Section/index.js +22 -4
  34. package/dist/atomic/Select/index.d.ts +3 -1
  35. package/dist/atomic/Select/index.d.ts.map +1 -1
  36. package/dist/atomic/Select/index.js +13 -24
  37. package/dist/atomic/Skeleton/index.d.ts.map +1 -1
  38. package/dist/atomic/Skeleton/index.js +6 -3
  39. package/dist/atomic/Switch/index.d.ts +18 -4
  40. package/dist/atomic/Switch/index.d.ts.map +1 -1
  41. package/dist/atomic/Switch/index.js +25 -6
  42. package/dist/atomic/Table/index.d.ts +17 -7
  43. package/dist/atomic/Table/index.d.ts.map +1 -1
  44. package/dist/atomic/Table/index.js +13 -3
  45. package/dist/atomic/Tooltip/index.d.ts.map +1 -1
  46. package/dist/atomic/Tooltip/index.js +6 -2
  47. package/dist/atomic/VideoPlayer/index.d.ts.map +1 -1
  48. package/dist/atomic/index.d.ts +2 -3
  49. package/dist/atomic/index.d.ts.map +1 -1
  50. package/dist/atomic/index.js +1 -2
  51. package/dist/hooks/useIntersectionObserver.js +3 -1
  52. package/dist/index.js +4 -4
  53. package/dist/styles/index.css +495 -81
  54. package/package.json +1 -1
  55. package/dist/atomic/Combobox/ComboboxPrimitive.d.ts +0 -18
  56. package/dist/atomic/Combobox/ComboboxPrimitive.d.ts.map +0 -1
  57. package/dist/atomic/Combobox/ComboboxPrimitive.js +0 -14
@@ -1,12 +1,3 @@
1
- /**
2
- * @fileoverview Accordion component
3
- * @description Accessible accordion component built on Radix UI primitives provides a prop based implementation to get rid of Radix internal nesting.
4
- *
5
- * @version 0.0.1
6
- * @since 0.0.1
7
- * @author AMBROISE PARK Consulting
8
- */
9
- import { type VariantProps } from 'class-variance-authority';
10
1
  import type { ReactNode } from 'react';
11
2
  export interface AccordionItemType {
12
3
  /** The unique value for the accordion item */
@@ -16,11 +7,7 @@ export interface AccordionItemType {
16
7
  /** The content to be displayed when expanded */
17
8
  content: string | ReactNode;
18
9
  }
19
- declare const accordionVariants: (props?: ({
20
- variant?: "default" | "warning" | "success" | "muted" | "primary" | "secondary" | "accent" | "destructive" | null | undefined;
21
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
22
- export type AccordionVariant = VariantProps<typeof accordionVariants>['variant'];
23
- export interface AccordionProps extends VariantProps<typeof accordionVariants> {
10
+ export interface AccordionProps {
24
11
  /**
25
12
  * The type of accordion.
26
13
  * @default 'single'
@@ -59,7 +46,6 @@ export interface AccordionProps extends VariantProps<typeof accordionVariants> {
59
46
  * @param {AccordionProps} props - The props for the accordion
60
47
  * @returns {JSX.Element} The rendered accordion
61
48
  */
62
- declare const Accordion: ({ type, collapsible, defaultValue, value, onValueChange, items, variant, className, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
49
+ declare const Accordion: ({ type, collapsible, defaultValue, value, onValueChange, items, className, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
63
50
  export default Accordion;
64
- export { accordionVariants };
65
51
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Accordion/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,iBAAiB;IAChC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,gDAAgD;IAChD,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,iBAAiB;;8EAgBrB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CACzC,OAAO,iBAAiB,CACzB,CAAC,SAAS,CAAC,CAAC;AAEb,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,iBAAiB,CAAC;IAC5E;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,kCAAkC;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,SAAS,GAAI,uFAShB,cAAc,4CAkEhB,CAAC;AAEF,eAAe,SAAS,CAAC;AACzB,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Accordion/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,iBAAiB;IAChC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,gDAAgD;IAChD,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,kCAAkC;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,SAAS,GAAI,8EAQhB,cAAc,4CA0DhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -8,28 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
8
  * @since 0.0.1
9
9
  * @author AMBROISE PARK Consulting
10
10
  */
11
- import { cva } from 'class-variance-authority';
12
11
  import AccordionPrimitive, { AccordionItemPrimitive, AccordionTriggerPrimitive, AccordionContentPrimitive, } from './AccordionPrimitive';
13
- import { cn, getVariantDataAttrs } from '../../utils/helpers';
14
- import { THEME_VARIANT } from '../../utils/constants';
12
+ import { cn } from '../../utils/helpers';
15
13
  import { ChevronDown } from 'lucide-react';
16
- const accordionVariants = cva('dndev-accordion', {
17
- variants: {
18
- variant: {
19
- [THEME_VARIANT.DEFAULT]: '',
20
- [THEME_VARIANT.MUTED]: '',
21
- [THEME_VARIANT.PRIMARY]: '',
22
- [THEME_VARIANT.SECONDARY]: '',
23
- [THEME_VARIANT.ACCENT]: '',
24
- [THEME_VARIANT.SUCCESS]: '',
25
- [THEME_VARIANT.WARNING]: '',
26
- [THEME_VARIANT.DESTRUCTIVE]: '',
27
- },
28
- },
29
- defaultVariants: {
30
- variant: THEME_VARIANT.DEFAULT,
31
- },
32
- });
33
14
  /**
34
15
  * A vertically stacked set of interactive headings that each reveal a section of content.
35
16
  * Built on Radix UI Accordion.
@@ -47,13 +28,11 @@ const accordionVariants = cva('dndev-accordion', {
47
28
  * @param {AccordionProps} props - The props for the accordion
48
29
  * @returns {JSX.Element} The rendered accordion
49
30
  */
50
- const Accordion = ({ type = 'single', collapsible = false, defaultValue, value, onValueChange, items, variant, className, }) => {
51
- const variantAttrs = getVariantDataAttrs({ variant });
31
+ const Accordion = ({ type = 'single', collapsible = false, defaultValue, value, onValueChange, items, className, }) => {
52
32
  // Handle type narrowing for Radix's union types
53
33
  if (type === 'multiple') {
54
- return (_jsx(AccordionPrimitive, { type: "multiple", defaultValue: defaultValue, value: value, onValueChange: onValueChange, className: cn(accordionVariants({ variant }), className), children: items.map((item) => (_jsxs(AccordionItemPrimitive, { value: item.value, className: "dndev-accordion-item", children: [_jsxs(AccordionTriggerPrimitive, { className: "dndev-interactive dndev-accordion-header", ...variantAttrs, children: [item.trigger, _jsx(ChevronDown, { className: "dndev-accordion-trigger-icon" })] }), _jsx(AccordionContentPrimitive, { className: "dndev-accordion-content", children: _jsx("div", { className: "dndev-accordion-content-inner", children: item.content }) })] }, item.value))) }));
34
+ return (_jsx(AccordionPrimitive, { type: "multiple", defaultValue: defaultValue, value: value, onValueChange: onValueChange, className: cn('dndev-accordion', className), children: items.map((item) => (_jsxs(AccordionItemPrimitive, { value: item.value, className: "dndev-accordion-item", children: [_jsxs(AccordionTriggerPrimitive, { className: "dndev-interactive dndev-accordion-header", children: [item.trigger, _jsx(ChevronDown, { className: "dndev-accordion-trigger-icon" })] }), _jsx(AccordionContentPrimitive, { className: "dndev-accordion-content", children: _jsx("div", { className: "dndev-accordion-content-inner", children: item.content }) })] }, item.value))) }));
55
35
  }
56
- return (_jsx(AccordionPrimitive, { type: "single", collapsible: collapsible, defaultValue: defaultValue, value: value, onValueChange: onValueChange, className: cn(accordionVariants({ variant }), className), children: items.map((item) => (_jsxs(AccordionItemPrimitive, { value: item.value, className: "dndev-accordion-item", children: [_jsxs(AccordionTriggerPrimitive, { className: "dndev-interactive dndev-accordion-header", ...variantAttrs, children: [item.trigger, _jsx(ChevronDown, { className: "dndev-accordion-trigger-icon" })] }), _jsx(AccordionContentPrimitive, { className: "dndev-accordion-content", children: _jsx("div", { className: "dndev-accordion-content-inner", children: item.content }) })] }, item.value))) }));
36
+ return (_jsx(AccordionPrimitive, { type: "single", collapsible: collapsible, defaultValue: defaultValue, value: value, onValueChange: onValueChange, className: cn('dndev-accordion', className), children: items.map((item) => (_jsxs(AccordionItemPrimitive, { value: item.value, className: "dndev-accordion-item", children: [_jsxs(AccordionTriggerPrimitive, { className: "dndev-interactive dndev-accordion-header", children: [item.trigger, _jsx(ChevronDown, { className: "dndev-accordion-trigger-icon" })] }), _jsx(AccordionContentPrimitive, { className: "dndev-accordion-content", children: _jsx("div", { className: "dndev-accordion-content-inner", children: item.content }) })] }, item.value))) }));
57
37
  };
58
38
  export default Accordion;
59
- export { accordionVariants };
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Alert/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQlE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,QAAA,MAAM,aAAa;;8EAajB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE9E,MAAM,WAAW,UACf,SACE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAC7C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gDAAgD;IAChD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,GAAI,mFASZ,UAAU,4CAoDZ,CAAC;AAEF,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Alert/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQlE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,QAAA,MAAM,aAAa;;8EAajB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE9E,MAAM,WAAW,UACf,SACE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAC7C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gDAAgD;IAChD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,GAAI,mFASZ,UAAU,4CAsDZ,CAAC;AAEF,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,CAAC"}
@@ -72,7 +72,7 @@ const Alert = ({ className, variant = ALERT_VARIANT.DEFAULT, hideIcon = false, t
72
72
  const variantAttrs = getVariantDataAttrs({
73
73
  variant: getThemeVariant(variant),
74
74
  });
75
- return (_jsxs(Stack, { direction: "row", gap: "medium", role: "alert", className: cn(alertVariants({ variant }), className), ...variantAttrs, title: tooltip, ...props, children: [!hideIcon && (_jsx(Icon, { icon: IconComponent, className: "dndev-size-md dndev-flex-shrink-0", "aria-hidden": "true" })), _jsxs(Stack, { gap: "tight", flex: "1", className: "dndev-min-w-0", children: [title && _jsx("div", { className: "dndev-alert-title dndev-text-h5", children: title }), description && (_jsx("div", { className: "dndev-text-base dndev-alert-description", children: description })), children] })] }));
75
+ return (_jsxs(Stack, { direction: "row", gap: "medium", role: "alert", className: cn(alertVariants({ variant }), className), ...variantAttrs, title: tooltip, ...props, children: [!hideIcon && (_jsx(Icon, { icon: IconComponent, className: "dndev-size-md dndev-flex-shrink-0", "aria-hidden": "true" })), _jsxs(Stack, { gap: "tight", flex: "1", className: "dndev-min-w-0", children: [title && (_jsx("div", { className: "dndev-alert-title dndev-text-h5", children: title })), description && (_jsx("div", { className: "dndev-text-base dndev-alert-description", children: description })), children] })] }));
76
76
  };
77
77
  export default Alert;
78
78
  export { alertVariants };
@@ -91,6 +91,9 @@ const Button = ({ className, variant, render, display = DISPLAY.AUTO, icon, icon
91
91
  // Map 'default' variant to 'primary' for data-variant (same styling)
92
92
  const variantForDataAttr = variant === THEME_VARIANT.DEFAULT ? THEME_VARIANT.PRIMARY : variant;
93
93
  const variantAttrs = getVariantDataAttrs({ variant: variantForDataAttr });
94
+ // Extract type from props before spreading (to ensure it's not overridden)
95
+ const buttonType = props.type || 'button';
96
+ const { type: _type, ...restProps } = props;
94
97
  // Build all props that should be passed to element (button or render prop)
95
98
  const elementProps = {
96
99
  children: buttonContent,
@@ -101,10 +104,10 @@ const Button = ({ className, variant, render, display = DISPLAY.AUTO, icon, icon
101
104
  ...(floating && { 'data-floating': 'true' }),
102
105
  ...(fullWidth && { 'data-full-width': 'true' }),
103
106
  ...(effectiveDisplay && { 'data-display': effectiveDisplay }),
104
- ...props,
107
+ ...restProps,
105
108
  };
106
109
  // Render prop pattern - no cloneElement needed (React 19 compatible)
107
- const buttonElement = render ? (render(elementProps)) : (_jsx("button", { type: props.type || 'button', role: "button", tabIndex: 0, ...elementProps, children: buttonContent }));
110
+ const buttonElement = render ? (render(elementProps)) : (_jsx("button", { type: buttonType, role: "button", tabIndex: 0, ...elementProps, children: buttonContent }));
108
111
  // Tooltip: COMPACT/AUTO (may be icon-only when collapsed), others only if explicit
109
112
  // Don't specify side - let CSS --tooltip-side take priority (RTL-aware in sidebars)
110
113
  if (effectiveDisplay === DISPLAY.COMPACT ||
@@ -112,7 +115,7 @@ const Button = ({ className, variant, render, display = DISPLAY.AUTO, icon, icon
112
115
  return (_jsx(Tooltip, { content: tooltip || getAriaLabel() || 'Button', children: buttonElement }));
113
116
  }
114
117
  if (tooltip) {
115
- return (_jsx(Tooltip, { content: tooltip, children: buttonElement }));
118
+ return _jsx(Tooltip, { content: tooltip, children: buttonElement });
116
119
  }
117
120
  return buttonElement;
118
121
  };
@@ -13,7 +13,7 @@ function CalendarDropdown({ options = [], value, onChange, 'aria-label': ariaLab
13
13
  const gridStyle = {
14
14
  display: 'grid',
15
15
  gridTemplateColumns: isMonth ? 'repeat(3, 1fr)' : 'repeat(5, 1fr)',
16
- gap: 'var(--gap-xs)',
16
+ gap: 'var(--gap-sm)',
17
17
  padding: '0',
18
18
  };
19
19
  const handleSelect = (newValue) => {
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/CallToAction/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,UAAU,oBAAoB;IAC5B;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAEjC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qEAAqE;IACrE,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,uEAAuE;IACvE,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEnC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;IAEvE,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAC7D,oBAAoB,GAClB,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,oBAAoB,CAAC,CAAC;AAE/D,QAAA,MAAM,YAAY,mIA+CjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/CallToAction/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,UAAU,oBAAoB;IAC5B;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAEjC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qEAAqE;IACrE,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,uEAAuE;IACvE,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEnC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;IAEvE,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAC7D,oBAAoB,GAClB,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,oBAAoB,CAAC,CAAC;AAE/D,QAAA,MAAM,YAAY,mIAuDjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
@@ -46,7 +46,7 @@ const CallToAction = forwardRef(function CallToAction({ as = 'section', title, s
46
46
  className: cn('dndev-cta', className),
47
47
  'data-tone': tone,
48
48
  ...props,
49
- }, _jsxs("div", { className: "dndev-cta-content", "data-text-align": align, children: [title && (_jsx(Text, { as: "div", level: "h2", style: { fontSize: 'var(--font-size-2xl)' }, children: title })), subtitle && _jsx(Text, { as: "span", level: "h4", children: subtitle }), (primaryAction || secondaryAction) && (_jsxs("div", { className: "dndev-cta-actions", children: [primaryAction, secondaryAction] })), children] }));
49
+ }, _jsxs("div", { className: "dndev-cta-content", "data-text-align": align, children: [title && (_jsx(Text, { as: "div", level: "h2", style: { fontSize: 'var(--font-size-2xl)' }, children: title })), subtitle && (_jsx(Text, { as: "span", level: "h4", children: subtitle })), (primaryAction || secondaryAction) && (_jsxs("div", { className: "dndev-cta-actions", children: [primaryAction, secondaryAction] })), children] }));
50
50
  });
51
51
  CallToAction.displayName = 'CallToAction';
52
52
  export default CallToAction;
@@ -1,19 +1,6 @@
1
- /**
2
- * @fileoverview Collapsible component
3
- * @description Interactive component for expanding/collapsing content built on Radix UI primitives.
4
- *
5
- * @version 0.0.1
6
- * @since 0.0.1
7
- * @author AMBROISE PARK Consulting
8
- */
9
- import { type VariantProps } from 'class-variance-authority';
10
1
  import type { ReactNode } from 'react';
11
2
  import './Collapsible.css';
12
- declare const collapsibleVariants: (props?: ({
13
- variant?: "default" | "warning" | "success" | "muted" | "primary" | "secondary" | "accent" | "destructive" | null | undefined;
14
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
15
- export type CollapsibleVariant = VariantProps<typeof collapsibleVariants>['variant'];
16
- export interface CollapsibleProps extends VariantProps<typeof collapsibleVariants> {
3
+ export interface CollapsibleProps {
17
4
  /** Trigger element (button, text, etc.) */
18
5
  trigger?: ReactNode;
19
6
  /** Collapsible content */
@@ -26,6 +13,16 @@ export interface CollapsibleProps extends VariantProps<typeof collapsibleVariant
26
13
  defaultOpen?: boolean;
27
14
  /** Whether the collapsible is disabled */
28
15
  disabled?: boolean;
16
+ /**
17
+ * Show icon indicator (Plus/Minus or ChevronDown)
18
+ * @default false
19
+ */
20
+ showIcon?: boolean;
21
+ /**
22
+ * Icon style: 'plus-minus' or 'chevron'
23
+ * @default 'plus-minus'
24
+ */
25
+ iconStyle?: 'plus-minus' | 'chevron';
29
26
  /** Additional CSS classes */
30
27
  className?: string;
31
28
  }
@@ -43,7 +40,6 @@ export interface CollapsibleProps extends VariantProps<typeof collapsibleVariant
43
40
  * @param {CollapsibleProps} props - The props for the collapsible
44
41
  * @returns {JSX.Element} The rendered collapsible
45
42
  */
46
- declare function Collapsible({ trigger, children, open, onOpenChange, defaultOpen, disabled, variant, className, }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
43
+ declare function Collapsible({ trigger, children, open, onOpenChange, defaultOpen, disabled, showIcon, iconStyle, className, }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
47
44
  export default Collapsible;
48
- export { collapsibleVariants };
49
45
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Collapsible/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAUlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAE3B,QAAA,MAAM,mBAAmB;;8EAgBvB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAC3C,OAAO,mBAAmB,CAC3B,CAAC,SAAS,CAAC,CAAC;AAEb,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CACpD,OAAO,mBAAmB,CAC3B;IACC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,gBAAgB,2CAoBlB;AAED,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Collapsible/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACrC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,QAAgB,EAChB,SAAwB,EACxB,SAAS,GACV,EAAE,gBAAgB,2CA+DlB;AAED,eAAe,WAAW,CAAC"}
@@ -8,28 +8,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
8
  * @since 0.0.1
9
9
  * @author AMBROISE PARK Consulting
10
10
  */
11
- import { cva } from 'class-variance-authority';
11
+ import { useState } from 'react';
12
+ import { Plus, Minus, ChevronDown } from 'lucide-react';
12
13
  import CollapsiblePrimitive, { CollapsibleTrigger, CollapsibleContent, } from './CollapsiblePrimitive';
13
- import { cn, getVariantDataAttrs } from '../../utils/helpers';
14
- import { THEME_VARIANT } from '../../utils/constants';
14
+ import { cn } from '../../utils/helpers';
15
+ import Stack from '../Stack';
15
16
  import './Collapsible.css';
16
- const collapsibleVariants = cva('dndev-collapsible', {
17
- variants: {
18
- variant: {
19
- [THEME_VARIANT.DEFAULT]: '',
20
- [THEME_VARIANT.MUTED]: '',
21
- [THEME_VARIANT.PRIMARY]: '',
22
- [THEME_VARIANT.SECONDARY]: '',
23
- [THEME_VARIANT.ACCENT]: '',
24
- [THEME_VARIANT.SUCCESS]: '',
25
- [THEME_VARIANT.WARNING]: '',
26
- [THEME_VARIANT.DESTRUCTIVE]: '',
27
- },
28
- },
29
- defaultVariants: {
30
- variant: THEME_VARIANT.DEFAULT,
31
- },
32
- });
33
17
  /**
34
18
  * Accessible collapsible component.
35
19
  * Expands and collapses content with smooth animations.
@@ -44,9 +28,25 @@ const collapsibleVariants = cva('dndev-collapsible', {
44
28
  * @param {CollapsibleProps} props - The props for the collapsible
45
29
  * @returns {JSX.Element} The rendered collapsible
46
30
  */
47
- function Collapsible({ trigger, children, open, onOpenChange, defaultOpen, disabled, variant, className, }) {
48
- const variantAttrs = getVariantDataAttrs({ variant });
49
- return (_jsxs(CollapsiblePrimitive, { open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen, disabled: disabled, className: cn(collapsibleVariants({ variant }), className), ...variantAttrs, children: [trigger && _jsx(CollapsibleTrigger, { asChild: true, children: trigger }), _jsx(CollapsibleContent, { className: cn('dndev-collapsible-content', className), children: children })] }));
31
+ function Collapsible({ trigger, children, open, onOpenChange, defaultOpen, disabled, showIcon = false, iconStyle = 'plus-minus', className, }) {
32
+ const [internalOpen, setInternalOpen] = useState(() => defaultOpen || false);
33
+ const isControlled = open !== undefined;
34
+ const isOpen = isControlled ? open : internalOpen;
35
+ const handleOpenChange = isControlled
36
+ ? onOpenChange
37
+ : (newOpen) => {
38
+ setInternalOpen(newOpen);
39
+ onOpenChange?.(newOpen);
40
+ };
41
+ const renderTrigger = () => {
42
+ if (!trigger)
43
+ return null;
44
+ if (showIcon) {
45
+ const IconComponent = iconStyle === 'chevron' ? ChevronDown : isOpen ? Minus : Plus;
46
+ return (_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Stack, { as: "div", direction: "row", align: "center", justify: "between", className: "dndev-collapsible-trigger", children: [trigger, iconStyle === 'chevron' ? (_jsx(ChevronDown, { className: "dndev-collapsible-icon dndev-collapsible-chevron", "aria-hidden": "true" })) : (_jsx(IconComponent, { className: "dndev-collapsible-icon", "aria-hidden": "true" }))] }) }));
47
+ }
48
+ return _jsx(CollapsibleTrigger, { asChild: true, children: trigger });
49
+ };
50
+ return (_jsxs(CollapsiblePrimitive, { open: isControlled ? open : undefined, onOpenChange: handleOpenChange, defaultOpen: isControlled ? undefined : defaultOpen, disabled: disabled, className: cn('dndev-collapsible', className), children: [renderTrigger(), _jsx(CollapsibleContent, { className: cn('dndev-collapsible-content', className), children: children })] }));
50
51
  }
51
52
  export default Collapsible;
52
- export { collapsibleVariants };
@@ -1,12 +1,3 @@
1
- /**
2
- * @fileoverview Combobox component
3
- * @description Accessible combobox with search/filter functionality. Provides a prop-based implementation.
4
- *
5
- * @version 0.0.1
6
- * @since 0.0.1
7
- * @author AMBROISE PARK Consulting
8
- */
9
- import { type ReactNode } from 'react';
10
1
  import { CONTROL_VARIANT, type ControlVariant } from '../../utils/constants';
11
2
  import './Combobox.css';
12
3
  export interface ComboboxOption {
@@ -14,57 +5,28 @@ export interface ComboboxOption {
14
5
  label: string;
15
6
  disabled?: boolean;
16
7
  description?: string;
17
- content?: ReactNode;
8
+ content?: React.ReactNode;
18
9
  }
19
10
  export interface ComboboxProps {
20
- /** Selected value (string for single, array for multiple) */
21
11
  value?: string | string[];
22
- /** Change handler */
23
12
  onValueChange?: (value: string | string[]) => void;
24
- /** Placeholder text for trigger */
25
13
  placeholder?: string;
26
- /** Array of options */
27
14
  options?: ComboboxOption[];
28
- /** Custom trigger element */
29
- trigger?: ReactNode;
30
- /** Whether the combobox is disabled */
31
15
  disabled?: boolean;
32
- /** Whether the combobox is in a loading state */
33
16
  isLoading?: boolean;
34
- /** Variant for styling */
35
17
  variant?: ControlVariant;
36
- /** Placeholder for search input */
37
- searchPlaceholder?: string;
38
- /** Message when no results found */
39
18
  emptyMessage?: string;
40
- /** Custom filter function */
41
- filterFn?: (option: ComboboxOption, searchTerm: string) => boolean;
42
- /** Enable multiple selection */
43
19
  multiple?: boolean;
44
- /** Label for floating label - automatically floats when both label and placeholder are provided */
45
20
  label?: string;
21
+ creatable?: boolean;
22
+ createLabel?: string;
23
+ clearable?: boolean;
24
+ onOpenChange?: (open: boolean) => void;
25
+ onSearchChange?: (search: string) => void;
26
+ /** Whether the field is required - shows asterisk indicator */
27
+ required?: boolean;
46
28
  }
47
- /**
48
- * Accessible combobox component with search/filter functionality.
49
- * Provides a prop-based implementation to abstract complexity.
50
- *
51
- * @component
52
- * @example
53
- * ```tsx
54
- * <Combobox
55
- * value={value}
56
- * onValueChange={setValue}
57
- * placeholder="Select option..."
58
- * options={[
59
- * { value: 'option1', label: 'Option 1' },
60
- * { value: 'option2', label: 'Option 2' }
61
- * ]}
62
- * />
63
- * ```
64
- * @param {ComboboxProps} props - The props for the combobox
65
- * @returns {JSX.Element} The rendered combobox
66
- */
67
- declare const Combobox: ({ value, onValueChange, placeholder, searchPlaceholder, emptyMessage, options, trigger, disabled, isLoading, variant, filterFn, multiple, label, }: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
29
+ declare const Combobox: ({ value, onValueChange, placeholder, emptyMessage, options, disabled, isLoading, variant, multiple, label, creatable, createLabel, clearable, onOpenChange, onSearchChange, required, }: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
68
30
  export default Combobox;
69
31
  export { CONTROL_VARIANT as COMBOBOX_VARIANT };
70
32
  export type { ControlVariant as ComboboxVariant };
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Combobox/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAML,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAW7E,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,qBAAqB;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IACnE,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAYD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,QAAQ,GAAI,oJAcf,aAAa,4CA2Pf,CAAC;AAEF,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,eAAe,IAAI,gBAAgB,EAAE,CAAC;AAC/C,YAAY,EAAE,cAAc,IAAI,eAAe,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Combobox/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,GAAI,yLAiBf,aAAa,4CA4Uf,CAAC;AAEF,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,eAAe,IAAI,gBAAgB,EAAE,CAAC;AAC/C,YAAY,EAAE,cAAc,IAAI,eAAe,EAAE,CAAC"}