@plus-experience/design-system-carbon 0.2.2

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 (75) hide show
  1. package/DESIGN_SYSTEM.md +62 -0
  2. package/VIBECODING.md +70 -0
  3. package/app/carbon.scss +2 -0
  4. package/app/globals.css +152 -0
  5. package/bin/setup.js +271 -0
  6. package/dist/chunk-OELI3IRW.mjs +30 -0
  7. package/dist/chunk-PWVNM57C.mjs +8 -0
  8. package/dist/components/ui/accordion.d.mts +13 -0
  9. package/dist/components/ui/accordion.mjs +27 -0
  10. package/dist/components/ui/alert.d.mts +17 -0
  11. package/dist/components/ui/alert.mjs +37 -0
  12. package/dist/components/ui/badge.d.mts +8 -0
  13. package/dist/components/ui/badge.mjs +17 -0
  14. package/dist/components/ui/breadcrumb.d.mts +13 -0
  15. package/dist/components/ui/breadcrumb.mjs +27 -0
  16. package/dist/components/ui/button.d.mts +9 -0
  17. package/dist/components/ui/button.mjs +21 -0
  18. package/dist/components/ui/card.d.mts +16 -0
  19. package/dist/components/ui/card.mjs +42 -0
  20. package/dist/components/ui/checkbox.d.mts +9 -0
  21. package/dist/components/ui/checkbox.mjs +19 -0
  22. package/dist/components/ui/code-snippet.d.mts +9 -0
  23. package/dist/components/ui/code-snippet.mjs +17 -0
  24. package/dist/components/ui/date-picker.d.mts +13 -0
  25. package/dist/components/ui/date-picker.mjs +29 -0
  26. package/dist/components/ui/dialog.d.mts +22 -0
  27. package/dist/components/ui/dialog.mjs +48 -0
  28. package/dist/components/ui/dropdown-menu.d.mts +13 -0
  29. package/dist/components/ui/dropdown-menu.mjs +27 -0
  30. package/dist/components/ui/grid.d.mts +1 -0
  31. package/dist/components/ui/grid.mjs +2 -0
  32. package/dist/components/ui/input.d.mts +9 -0
  33. package/dist/components/ui/input.mjs +19 -0
  34. package/dist/components/ui/label.d.mts +5 -0
  35. package/dist/components/ui/label.mjs +23 -0
  36. package/dist/components/ui/loading.d.mts +13 -0
  37. package/dist/components/ui/loading.mjs +27 -0
  38. package/dist/components/ui/number-input.d.mts +9 -0
  39. package/dist/components/ui/number-input.mjs +19 -0
  40. package/dist/components/ui/pagination.d.mts +22 -0
  41. package/dist/components/ui/pagination.mjs +27 -0
  42. package/dist/components/ui/popover.d.mts +13 -0
  43. package/dist/components/ui/popover.mjs +27 -0
  44. package/dist/components/ui/progress.d.mts +10 -0
  45. package/dist/components/ui/progress.mjs +18 -0
  46. package/dist/components/ui/radio-group.d.mts +13 -0
  47. package/dist/components/ui/radio-group.mjs +29 -0
  48. package/dist/components/ui/search.d.mts +9 -0
  49. package/dist/components/ui/search.mjs +19 -0
  50. package/dist/components/ui/select.d.mts +13 -0
  51. package/dist/components/ui/select.mjs +22 -0
  52. package/dist/components/ui/separator.d.mts +7 -0
  53. package/dist/components/ui/separator.mjs +28 -0
  54. package/dist/components/ui/skeleton.d.mts +14 -0
  55. package/dist/components/ui/skeleton.mjs +28 -0
  56. package/dist/components/ui/slider.d.mts +9 -0
  57. package/dist/components/ui/slider.mjs +19 -0
  58. package/dist/components/ui/structured-list.d.mts +1 -0
  59. package/dist/components/ui/structured-list.mjs +2 -0
  60. package/dist/components/ui/switch.d.mts +9 -0
  61. package/dist/components/ui/switch.mjs +19 -0
  62. package/dist/components/ui/table.d.mts +1 -0
  63. package/dist/components/ui/table.mjs +2 -0
  64. package/dist/components/ui/tabs.d.mts +1 -0
  65. package/dist/components/ui/tabs.mjs +2 -0
  66. package/dist/components/ui/textarea.d.mts +9 -0
  67. package/dist/components/ui/textarea.mjs +19 -0
  68. package/dist/components/ui/tooltip.d.mts +14 -0
  69. package/dist/components/ui/tooltip.mjs +28 -0
  70. package/dist/design-system-carbon.css +2 -0
  71. package/dist/hooks/use-mobile.d.mts +3 -0
  72. package/dist/hooks/use-mobile.mjs +19 -0
  73. package/dist/lib/utils.d.mts +5 -0
  74. package/dist/lib/utils.mjs +2 -0
  75. package/package.json +67 -0
@@ -0,0 +1,27 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+ import { Popover as Popover$1, PopoverContent as PopoverContent$1 } from '@carbon/react';
5
+
6
+ function Popover(_a) {
7
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
8
+ return /* @__PURE__ */ React.createElement(
9
+ Popover$1,
10
+ __spreadValues({
11
+ "data-slot": "popover",
12
+ className: cn(className)
13
+ }, props)
14
+ );
15
+ }
16
+ function PopoverContent(_a) {
17
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
18
+ return /* @__PURE__ */ React.createElement(
19
+ PopoverContent$1,
20
+ __spreadValues({
21
+ "data-slot": "popover-content",
22
+ className: cn(className)
23
+ }, props)
24
+ );
25
+ }
26
+
27
+ export { Popover, PopoverContent };
@@ -0,0 +1,10 @@
1
+ import * as React from 'react';
2
+ import { ProgressBar } from '@carbon/react';
3
+ export { ProgressIndicator, ProgressStep } from '@carbon/react';
4
+
5
+ type CarbonProgressBarProps = React.ComponentProps<typeof ProgressBar>;
6
+ interface ProgressProps extends CarbonProgressBarProps {
7
+ }
8
+ declare function Progress({ className, ...props }: ProgressProps): React.JSX.Element;
9
+
10
+ export { Progress, type ProgressProps };
@@ -0,0 +1,18 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+ import { ProgressBar } from '@carbon/react';
5
+ export { ProgressIndicator, ProgressStep } from '@carbon/react';
6
+
7
+ function Progress(_a) {
8
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
9
+ return /* @__PURE__ */ React.createElement(
10
+ ProgressBar,
11
+ __spreadValues({
12
+ "data-slot": "progress",
13
+ className: cn(className)
14
+ }, props)
15
+ );
16
+ }
17
+
18
+ export { Progress };
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import { RadioButtonGroup, RadioButton } from '@carbon/react';
3
+
4
+ type CarbonRadioButtonGroupProps = React.ComponentProps<typeof RadioButtonGroup>;
5
+ type CarbonRadioButtonProps = React.ComponentProps<typeof RadioButton>;
6
+ interface RadioGroupProps extends CarbonRadioButtonGroupProps {
7
+ }
8
+ interface RadioGroupItemProps extends CarbonRadioButtonProps {
9
+ }
10
+ declare function RadioGroup({ className, ...props }: RadioGroupProps): React.JSX.Element;
11
+ declare function RadioGroupItem({ className, id, ...props }: RadioGroupItemProps): React.JSX.Element;
12
+
13
+ export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps };
@@ -0,0 +1,29 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+ import { RadioButtonGroup, RadioButton } from '@carbon/react';
5
+
6
+ function RadioGroup(_a) {
7
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
8
+ return /* @__PURE__ */ React.createElement(
9
+ RadioButtonGroup,
10
+ __spreadValues({
11
+ "data-slot": "radio-group",
12
+ className: cn(className)
13
+ }, props)
14
+ );
15
+ }
16
+ function RadioGroupItem(_a) {
17
+ var _b = _a, { className, id } = _b, props = __objRest(_b, ["className", "id"]);
18
+ const autoId = React.useId();
19
+ return /* @__PURE__ */ React.createElement(
20
+ RadioButton,
21
+ __spreadValues({
22
+ "data-slot": "radio-group-item",
23
+ id: id != null ? id : autoId,
24
+ className: cn(className)
25
+ }, props)
26
+ );
27
+ }
28
+
29
+ export { RadioGroup, RadioGroupItem };
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ import { Search as Search$1 } from '@carbon/react';
3
+
4
+ type CarbonSearchProps = React.ComponentProps<typeof Search$1>;
5
+ interface SearchProps extends CarbonSearchProps {
6
+ }
7
+ declare function Search({ className, id, ...props }: SearchProps): React.JSX.Element;
8
+
9
+ export { Search, type SearchProps };
@@ -0,0 +1,19 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+ import { Search as Search$1 } from '@carbon/react';
5
+
6
+ function Search(_a) {
7
+ var _b = _a, { className, id } = _b, props = __objRest(_b, ["className", "id"]);
8
+ const autoId = React.useId();
9
+ return /* @__PURE__ */ React.createElement(
10
+ Search$1,
11
+ __spreadValues({
12
+ "data-slot": "search",
13
+ id: id != null ? id : autoId,
14
+ className: cn(className)
15
+ }, props)
16
+ );
17
+ }
18
+
19
+ export { Search };
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import { Select as Select$1, SelectItem } from '@carbon/react';
3
+
4
+ type CarbonSelectProps = React.ComponentProps<typeof Select$1>;
5
+ type CarbonSelectItemProps = React.ComponentProps<typeof SelectItem>;
6
+ interface SelectProps extends CarbonSelectProps {
7
+ }
8
+ interface SelectOptionProps extends CarbonSelectItemProps {
9
+ }
10
+ declare function Select({ className, id, ...props }: SelectProps): React.JSX.Element;
11
+ declare function SelectOption(props: SelectOptionProps): React.JSX.Element;
12
+
13
+ export { Select, SelectOption, type SelectOptionProps, type SelectProps };
@@ -0,0 +1,22 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+ import { Select as Select$1, SelectItem } from '@carbon/react';
5
+
6
+ function Select(_a) {
7
+ var _b = _a, { className, id } = _b, props = __objRest(_b, ["className", "id"]);
8
+ const autoId = React.useId();
9
+ return /* @__PURE__ */ React.createElement(
10
+ Select$1,
11
+ __spreadValues({
12
+ "data-slot": "select",
13
+ id: id != null ? id : autoId,
14
+ className: cn(className)
15
+ }, props)
16
+ );
17
+ }
18
+ function SelectOption(props) {
19
+ return /* @__PURE__ */ React.createElement(SelectItem, __spreadValues({}, props));
20
+ }
21
+
22
+ export { Select, SelectOption };
@@ -0,0 +1,7 @@
1
+ import * as React from 'react';
2
+
3
+ declare function Separator({ className, orientation, ...props }: React.ComponentProps<"div"> & {
4
+ orientation?: "horizontal" | "vertical";
5
+ }): React.JSX.Element;
6
+
7
+ export { Separator };
@@ -0,0 +1,28 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+
5
+ function Separator(_a) {
6
+ var _b = _a, {
7
+ className,
8
+ orientation = "horizontal"
9
+ } = _b, props = __objRest(_b, [
10
+ "className",
11
+ "orientation"
12
+ ]);
13
+ return /* @__PURE__ */ React.createElement(
14
+ "div",
15
+ __spreadValues({
16
+ "data-slot": "separator",
17
+ role: "separator",
18
+ "aria-orientation": orientation,
19
+ className: cn(
20
+ "shrink-0 bg-border",
21
+ orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
22
+ className
23
+ )
24
+ }, props)
25
+ );
26
+ }
27
+
28
+ export { Separator };
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ import { SkeletonText, SkeletonPlaceholder } from '@carbon/react';
3
+ export { AccordionSkeleton, ButtonSkeleton, SearchSkeleton, SkeletonIcon, TagSkeleton } from '@carbon/react';
4
+
5
+ type CarbonSkeletonTextProps = React.ComponentProps<typeof SkeletonText>;
6
+ type CarbonSkeletonPlaceholderProps = React.ComponentProps<typeof SkeletonPlaceholder>;
7
+ interface SkeletonProps extends CarbonSkeletonTextProps {
8
+ }
9
+ interface SkeletonBoxProps extends CarbonSkeletonPlaceholderProps {
10
+ }
11
+ declare function Skeleton({ className, ...props }: SkeletonProps): React.JSX.Element;
12
+ declare function SkeletonBox({ className, ...props }: SkeletonBoxProps): React.JSX.Element;
13
+
14
+ export { Skeleton, SkeletonBox, type SkeletonBoxProps, type SkeletonProps };
@@ -0,0 +1,28 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+ import { SkeletonText, SkeletonPlaceholder } from '@carbon/react';
5
+ export { AccordionSkeleton, ButtonSkeleton, SearchSkeleton, SkeletonIcon, TagSkeleton } from '@carbon/react';
6
+
7
+ function Skeleton(_a) {
8
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
9
+ return /* @__PURE__ */ React.createElement(
10
+ SkeletonText,
11
+ __spreadValues({
12
+ "data-slot": "skeleton",
13
+ className: cn(className)
14
+ }, props)
15
+ );
16
+ }
17
+ function SkeletonBox(_a) {
18
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
19
+ return /* @__PURE__ */ React.createElement(
20
+ SkeletonPlaceholder,
21
+ __spreadValues({
22
+ "data-slot": "skeleton-box",
23
+ className: cn(className)
24
+ }, props)
25
+ );
26
+ }
27
+
28
+ export { Skeleton, SkeletonBox };
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ import { Slider as Slider$1 } from '@carbon/react';
3
+
4
+ type CarbonSliderProps = React.ComponentProps<typeof Slider$1>;
5
+ interface SliderProps extends CarbonSliderProps {
6
+ }
7
+ declare function Slider({ className, id, ...props }: SliderProps): React.JSX.Element;
8
+
9
+ export { Slider, type SliderProps };
@@ -0,0 +1,19 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+ import { Slider as Slider$1 } from '@carbon/react';
5
+
6
+ function Slider(_a) {
7
+ var _b = _a, { className, id } = _b, props = __objRest(_b, ["className", "id"]);
8
+ const autoId = React.useId();
9
+ return /* @__PURE__ */ React.createElement(
10
+ Slider$1,
11
+ __spreadValues({
12
+ "data-slot": "slider",
13
+ id: id != null ? id : autoId,
14
+ className: cn(className)
15
+ }, props)
16
+ );
17
+ }
18
+
19
+ export { Slider };
@@ -0,0 +1 @@
1
+ export { StructuredListWrapper as StructuredList, StructuredListBody, StructuredListCell, StructuredListHead as StructuredListHeader, StructuredListInput, StructuredListRow as StructuredListItem } from '@carbon/react';
@@ -0,0 +1,2 @@
1
+ import '../../chunk-OELI3IRW.mjs';
2
+ export { StructuredListWrapper as StructuredList, StructuredListBody, StructuredListCell, StructuredListHead as StructuredListHeader, StructuredListInput, StructuredListRow as StructuredListItem } from '@carbon/react';
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ import { Toggle } from '@carbon/react';
3
+
4
+ type CarbonToggleProps = React.ComponentProps<typeof Toggle>;
5
+ interface SwitchProps extends CarbonToggleProps {
6
+ }
7
+ declare function Switch({ className, id, ...props }: SwitchProps): React.JSX.Element;
8
+
9
+ export { Switch, type SwitchProps };
@@ -0,0 +1,19 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+ import { Toggle } from '@carbon/react';
5
+
6
+ function Switch(_a) {
7
+ var _b = _a, { className, id } = _b, props = __objRest(_b, ["className", "id"]);
8
+ const autoId = React.useId();
9
+ return /* @__PURE__ */ React.createElement(
10
+ Toggle,
11
+ __spreadValues({
12
+ "data-slot": "switch",
13
+ id: id != null ? id : autoId,
14
+ className: cn(className)
15
+ }, props)
16
+ );
17
+ }
18
+
19
+ export { Switch };
@@ -0,0 +1 @@
1
+ export { DataTable, Table, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch } from '@carbon/react';
@@ -0,0 +1,2 @@
1
+ import '../../chunk-OELI3IRW.mjs';
2
+ export { DataTable, Table, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch } from '@carbon/react';
@@ -0,0 +1 @@
1
+ export { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
@@ -0,0 +1,2 @@
1
+ import '../../chunk-OELI3IRW.mjs';
2
+ export { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ import { TextArea } from '@carbon/react';
3
+
4
+ type CarbonTextAreaProps = React.ComponentProps<typeof TextArea>;
5
+ interface TextareaProps extends CarbonTextAreaProps {
6
+ }
7
+ declare function Textarea({ className, id, ...props }: TextareaProps): React.JSX.Element;
8
+
9
+ export { Textarea, type TextareaProps };
@@ -0,0 +1,19 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+ import { TextArea } from '@carbon/react';
5
+
6
+ function Textarea(_a) {
7
+ var _b = _a, { className, id } = _b, props = __objRest(_b, ["className", "id"]);
8
+ const autoId = React.useId();
9
+ return /* @__PURE__ */ React.createElement(
10
+ TextArea,
11
+ __spreadValues({
12
+ "data-slot": "textarea",
13
+ id: id != null ? id : autoId,
14
+ className: cn(className)
15
+ }, props)
16
+ );
17
+ }
18
+
19
+ export { Textarea };
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ import { Tooltip as Tooltip$1, Toggletip } from '@carbon/react';
3
+ export { DefinitionTooltip, ToggletipActions, ToggletipButton, ToggletipContent } from '@carbon/react';
4
+
5
+ type CarbonTooltipProps = React.ComponentProps<typeof Tooltip$1>;
6
+ type CarbonToggletipProps = React.ComponentProps<typeof Toggletip>;
7
+ interface TooltipProps extends CarbonTooltipProps {
8
+ }
9
+ interface TooltipInfoProps extends CarbonToggletipProps {
10
+ }
11
+ declare function Tooltip({ className, ...props }: TooltipProps): React.JSX.Element;
12
+ declare function TooltipInfo({ className, ...props }: TooltipInfoProps): React.JSX.Element;
13
+
14
+ export { Tooltip, TooltipInfo, type TooltipInfoProps, type TooltipProps };
@@ -0,0 +1,28 @@
1
+ import { cn } from '../../chunk-PWVNM57C.mjs';
2
+ import { __objRest, __spreadValues } from '../../chunk-OELI3IRW.mjs';
3
+ import * as React from 'react';
4
+ import { Tooltip as Tooltip$1, Toggletip } from '@carbon/react';
5
+ export { DefinitionTooltip, ToggletipActions, ToggletipButton, ToggletipContent } from '@carbon/react';
6
+
7
+ function Tooltip(_a) {
8
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
9
+ return /* @__PURE__ */ React.createElement(
10
+ Tooltip$1,
11
+ __spreadValues({
12
+ "data-slot": "tooltip",
13
+ className: cn(className)
14
+ }, props)
15
+ );
16
+ }
17
+ function TooltipInfo(_a) {
18
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
19
+ return /* @__PURE__ */ React.createElement(
20
+ Toggletip,
21
+ __spreadValues({
22
+ "data-slot": "tooltip-info",
23
+ className: cn(className)
24
+ }, props)
25
+ );
26
+ }
27
+
28
+ export { Tooltip, TooltipInfo };
@@ -0,0 +1,2 @@
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}:root,:host{--font-sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.start{inset-inline-start:.25rem}.end{inset-inline-end:.25rem}.top-1\/2{top:50%}.left-1\/2{left:50%}.z-10{z-index:10}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.mx-auto{margin-inline:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-12{margin-top:3rem}.mr-1{margin-right:.25rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.size-3{width:.75rem;height:.75rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-7{width:1.75rem;height:1.75rem}.size-10{width:2.5rem;height:2.5rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-12{height:3rem}.h-16{height:4rem}.h-\[500px\]{height:500px}.h-full{height:100%}.h-px{height:1px}.min-h-\[calc\(100vh-3rem\)\]{min-height:calc(100vh - 3rem)}.min-h-full{min-height:100%}.w-1\/2{width:50%}.w-12{width:3rem}.w-\[100px\]{width:100px}.w-\[140px\]{width:140px}.w-\[220px\]{width:220px}.w-\[800px\]{width:800px}.w-full{width:100%}.w-px{width:1px}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.auto-rows-min{grid-auto-rows:min-content}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem * 3) * calc(1 - var(--tw-space-y-reverse)))}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-border{border-color:var(--border)}.bg-\[\#161616\]{background-color:#161616}.bg-\[rgba\(15\,98\,254\,0\.15\)\]{background-color:#0f62fe26}.bg-background{background-color:var(--background)}.bg-border{background-color:var(--border)}.bg-card{background-color:var(--card)}.bg-destructive{background-color:var(--destructive)}.bg-interactive{background-color:var(--interactive)}.bg-muted{background-color:var(--muted)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.p-0{padding:0}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.px-1\.5{padding-inline:.375rem}.px-4{padding-inline:1rem}.px-6{padding-inline:1.5rem}.py-0\.5{padding-block:.125rem}.py-3{padding-block:.75rem}.py-12{padding-block:3rem}.py-16{padding-block:4rem}.py-40{padding-block:10rem}.pt-4{padding-top:1rem}.pb-40{padding-bottom:10rem}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,monospace}.font-sans{font-family:IBM Plex Sans,-apple-system,BlinkMacSystemFont,system-ui,sans-serif}.text-2xl{font-size:1.5rem;line-height:var(--tw-leading,calc(2 / 1.5))}.text-4xl{font-size:2.25rem;line-height:var(--tw-leading,calc(2.5 / 2.25))}.text-5xl{font-size:3rem;line-height:var(--tw-leading,1)}.text-base{font-size:1rem;line-height:var(--tw-leading,calc(1.5 / 1))}.text-lg{font-size:1.125rem;line-height:var(--tw-leading,calc(1.75 / 1.125))}.text-sm{font-size:.875rem;line-height:var(--tw-leading,calc(1.25 / .875))}.text-xs{font-size:.75rem;line-height:var(--tw-leading,calc(1 / .75))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[15px\]{font-size:15px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:1.625;line-height:1.625}.leading-snug{--tw-leading:1.375;line-height:1.375}.font-bold{--tw-font-weight:700;font-weight:700}.font-medium{--tw-font-weight:500;font-weight:500}.font-semibold{--tw-font-weight:600;font-weight:600}.tracking-\[-0\.03em\]{--tw-tracking:-.03em;letter-spacing:-.03em}.tracking-\[-0\.04em\]{--tw-tracking:-.04em;letter-spacing:-.04em}.tracking-tight{--tw-tracking:-.025em;letter-spacing:-.025em}.tracking-wider{--tw-tracking:.05em;letter-spacing:.05em}.tracking-widest{--tw-tracking:.1em;letter-spacing:.1em}.text-foreground{color:var(--foreground)}.text-interactive{color:var(--interactive)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary-foreground{color:var(--primary-foreground)}.text-white{color:#fff}.uppercase{text-transform:uppercase}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur-\[150px\]{--tw-blur:blur(150px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,cubic-bezier(.4, 0, .2, 1));transition-duration:var(--tw-duration,.15s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,cubic-bezier(.4, 0, .2, 1));transition-duration:var(--tw-duration,.15s)}@media (hover:hover){.group-hover\:text-interactive:is(:where(.group):hover *){color:var(--interactive)}.group-hover\:shadow-md:is(:where(.group):hover *){--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media (hover:hover){.hover\:bg-interactive-hover:hover{background-color:var(--interactive-hover)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:48rem){.md\:py-56{padding-block:14rem}.md\:text-7xl{font-size:4.5rem;line-height:var(--tw-leading,1)}}@media (min-width:64rem){.lg\:ml-64{margin-left:16rem}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@@ -0,0 +1,3 @@
1
+ declare function useIsMobile(): boolean;
2
+
3
+ export { useIsMobile };
@@ -0,0 +1,19 @@
1
+ import '../chunk-OELI3IRW.mjs';
2
+ import * as React from 'react';
3
+
4
+ var MOBILE_BREAKPOINT = 768;
5
+ function useIsMobile() {
6
+ const [isMobile, setIsMobile] = React.useState(void 0);
7
+ React.useEffect(() => {
8
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
9
+ const onChange = () => {
10
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
11
+ };
12
+ mql.addEventListener("change", onChange);
13
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
14
+ return () => mql.removeEventListener("change", onChange);
15
+ }, []);
16
+ return !!isMobile;
17
+ }
18
+
19
+ export { useIsMobile };
@@ -0,0 +1,5 @@
1
+ import { ClassValue } from 'clsx';
2
+
3
+ declare function cn(...inputs: ClassValue[]): string;
4
+
5
+ export { cn };
@@ -0,0 +1,2 @@
1
+ export { cn } from '../chunk-PWVNM57C.mjs';
2
+ import '../chunk-OELI3IRW.mjs';
package/package.json ADDED
@@ -0,0 +1,67 @@
1
+ {
2
+ "name": "@plus-experience/design-system-carbon",
3
+ "version": "0.2.2",
4
+ "private": false,
5
+ "publishConfig": {
6
+ "registry": "https://registry.npmjs.org",
7
+ "access": "public"
8
+ },
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/plus-experience/design-system-carbon.git"
12
+ },
13
+ "bin": {
14
+ "design-system-carbon": "./bin/setup.js"
15
+ },
16
+ "exports": {
17
+ "./ui/*": "./dist/components/ui/*.mjs",
18
+ "./lib/utils": "./dist/lib/utils.mjs",
19
+ "./hooks/*": "./dist/hooks/*.mjs",
20
+ "./globals.css": "./app/globals.css",
21
+ "./carbon.scss": "./app/carbon.scss",
22
+ "./styles.css": "./dist/design-system-carbon.css"
23
+ },
24
+ "files": [
25
+ "dist",
26
+ "app/globals.css",
27
+ "app/carbon.scss",
28
+ "bin",
29
+ "VIBECODING.md",
30
+ "DESIGN_SYSTEM.md"
31
+ ],
32
+ "scripts": {
33
+ "dev": "next dev",
34
+ "build:pkg": "tsup",
35
+ "build": "next build",
36
+ "start": "next start",
37
+ "lint": "eslint",
38
+ "build:css": "npx @tailwindcss/cli -i styles/library.css -o dist/design-system-carbon.css --minify",
39
+ "prepublishOnly": "tsup && npx @tailwindcss/cli -i styles/library.css -o dist/design-system-carbon.css --minify"
40
+ },
41
+ "dependencies": {
42
+ "@carbon/icons-react": "^11.55.0",
43
+ "@carbon/react": "^1.76.0",
44
+ "@eslint/eslintrc": "^3.3.5",
45
+ "class-variance-authority": "^0.7.1",
46
+ "clsx": "^2.1.1",
47
+ "date-fns": "^4.1.0",
48
+ "next": "15.3.2",
49
+ "next-themes": "^0.4.6",
50
+ "react": "^19.1.0",
51
+ "react-dom": "^19.1.0",
52
+ "recharts": "^3.8.0",
53
+ "tailwind-merge": "^3.5.0"
54
+ },
55
+ "devDependencies": {
56
+ "@tailwindcss/postcss": "^4",
57
+ "@types/node": "^20",
58
+ "@types/react": "^19",
59
+ "@types/react-dom": "^19",
60
+ "eslint": "^9",
61
+ "eslint-config-next": "15.3.2",
62
+ "sass": "^1.87.0",
63
+ "tailwindcss": "^4",
64
+ "tsup": "^8.5.1",
65
+ "typescript": "^5"
66
+ }
67
+ }