@plus-experience/design-system-carbon 0.2.4 → 0.2.5

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.
package/DESIGN_SYSTEM.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  ### 필수 규칙
8
8
 
9
- 1. **네이티브 HTML 금지**: `<button>`, `<input>`, `<select>`, `<textarea>` 대신 항상 `@/components/ui/` 컴포넌트 사용
9
+ 1. **네이티브 HTML 금지**: `<button>`, `<input>`, `<select>`, `<textarea>` 대신 항상 `@plus-experience/design-system-carbon/ui/` 컴포넌트 사용
10
10
  2. **하드코딩 색상 금지**: `bg-[#161616]` 대신 `bg-background`, `bg-card`, `text-interactive` 등 CSS 변수 토큰 사용
11
11
  3. **접근성 유지**: Carbon 컴포넌트의 aria 속성, labelText 등을 유지
12
12
  4. **Carbon 스페이싱**: 8px, 16px, 24px, 32px, 48px 단위 사용
@@ -15,34 +15,34 @@
15
15
 
16
16
  ```tsx
17
17
  // Button
18
- import { Button } from "@/components/ui/button"
18
+ import { Button } from "@plus-experience/design-system-carbon/ui/button"
19
19
 
20
20
  // Input
21
- import { Input } from "@/components/ui/input"
21
+ import { Input } from "@plus-experience/design-system-carbon/ui/input"
22
22
 
23
23
  // Card
24
- import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
24
+ import { Card, CardHeader, CardTitle, CardContent } from "@plus-experience/design-system-carbon/ui/card"
25
25
 
26
26
  // Badge (Carbon Tag 래퍼)
27
- import { Badge } from "@/components/ui/badge"
27
+ import { Badge } from "@plus-experience/design-system-carbon/ui/badge"
28
28
 
29
29
  // Dialog (Carbon ComposedModal 래퍼)
30
- import { Dialog, DialogHeader, DialogContent, DialogFooter } from "@/components/ui/dialog"
30
+ import { Dialog, DialogHeader, DialogContent, DialogFooter } from "@plus-experience/design-system-carbon/ui/dialog"
31
31
 
32
32
  // Table
33
- import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"
33
+ import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@plus-experience/design-system-carbon/ui/table"
34
34
 
35
35
  // Accordion
36
- import { Accordion, AccordionItem } from "@/components/ui/accordion"
36
+ import { Accordion, AccordionItem } from "@plus-experience/design-system-carbon/ui/accordion"
37
37
 
38
38
  // Tabs
39
- import { Tabs, TabsList, TabsTrigger, TabsContent, TabsContentGroup } from "@/components/ui/tabs"
39
+ import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@plus-experience/design-system-carbon/ui/tabs"
40
40
 
41
41
  // Alert (Carbon InlineNotification 래퍼)
42
- import { Alert } from "@/components/ui/alert"
42
+ import { Alert } from "@plus-experience/design-system-carbon/ui/alert"
43
43
 
44
44
  // Loading
45
- import { Loading, Spinner } from "@/components/ui/loading"
45
+ import { Loading, Spinner } from "@plus-experience/design-system-carbon/ui/loading"
46
46
 
47
47
  // Icons (Carbon Icons)
48
48
  import { Add, Edit, TrashCan, Search, ChevronRight } from "@carbon/icons-react"
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Plus Experience
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -3,10 +3,8 @@ import { Accordion as Accordion$1, AccordionItem as AccordionItem$1 } from '@car
3
3
 
4
4
  type CarbonAccordionProps = React.ComponentProps<typeof Accordion$1>;
5
5
  type CarbonAccordionItemProps = React.ComponentProps<typeof AccordionItem$1>;
6
- interface AccordionProps extends CarbonAccordionProps {
7
- }
8
- interface AccordionItemProps extends CarbonAccordionItemProps {
9
- }
6
+ type AccordionProps = CarbonAccordionProps;
7
+ type AccordionItemProps = CarbonAccordionItemProps;
10
8
  declare function Accordion({ className, ...props }: AccordionProps): React.JSX.Element;
11
9
  declare function AccordionItem({ className, ...props }: AccordionItemProps): React.JSX.Element;
12
10
 
@@ -4,12 +4,9 @@ import { ActionableNotification, InlineNotification, ToastNotification } from '@
4
4
  type CarbonInlineNotificationProps = React.ComponentProps<typeof InlineNotification>;
5
5
  type CarbonToastNotificationProps = React.ComponentProps<typeof ToastNotification>;
6
6
  type CarbonActionableNotificationProps = React.ComponentProps<typeof ActionableNotification>;
7
- interface AlertProps extends CarbonInlineNotificationProps {
8
- }
9
- interface ToastProps extends CarbonToastNotificationProps {
10
- }
11
- interface ActionableAlertProps extends CarbonActionableNotificationProps {
12
- }
7
+ type AlertProps = CarbonInlineNotificationProps;
8
+ type ToastProps = CarbonToastNotificationProps;
9
+ type ActionableAlertProps = CarbonActionableNotificationProps;
13
10
  declare function Alert({ className, ...props }: AlertProps): React.JSX.Element;
14
11
  declare function Toast({ className, ...props }: ToastProps): React.JSX.Element;
15
12
  declare function ActionableAlert({ className, ...props }: ActionableAlertProps): React.JSX.Element;
@@ -1,8 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { TagBaseProps } from '@carbon/react/es/components/Tag/Tag';
3
3
 
4
- interface BadgeProps extends TagBaseProps {
5
- }
4
+ type BadgeProps = TagBaseProps;
6
5
  declare function Badge({ className, ...props }: BadgeProps): React.JSX.Element;
7
6
 
8
7
  export { Badge, type BadgeProps };
@@ -3,10 +3,8 @@ import { Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1 } from '
3
3
 
4
4
  type CarbonBreadcrumbProps = React.ComponentProps<typeof Breadcrumb$1>;
5
5
  type CarbonBreadcrumbItemProps = React.ComponentProps<typeof BreadcrumbItem$1>;
6
- interface BreadcrumbProps extends CarbonBreadcrumbProps {
7
- }
8
- interface BreadcrumbItemProps extends CarbonBreadcrumbItemProps {
9
- }
6
+ type BreadcrumbProps = CarbonBreadcrumbProps;
7
+ type BreadcrumbItemProps = CarbonBreadcrumbItemProps;
10
8
  declare function Breadcrumb({ className, ...props }: BreadcrumbProps): React.JSX.Element;
11
9
  declare function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps): React.JSX.Element;
12
10
 
@@ -1,9 +1,15 @@
1
- import * as React from 'react';
1
+ import * as _carbon_react from '@carbon/react';
2
2
  import { Button as Button$1 } from '@carbon/react';
3
+ import * as React from 'react';
3
4
 
4
5
  type CarbonButtonProps = React.ComponentProps<typeof Button$1>;
5
- interface ButtonProps extends CarbonButtonProps {
6
- }
7
- declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
6
+ type ButtonProps = CarbonButtonProps;
7
+ declare const Button: React.ForwardRefExoticComponent<Omit<_carbon_react.ButtonBaseProps & {
8
+ as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
9
+ } & {
10
+ children?: React.ReactNode | undefined;
11
+ } & Omit<Omit<any, "ref">, "as" | keyof _carbon_react.ButtonBaseProps> & {
12
+ ref?: any;
13
+ }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
8
14
 
9
15
  export { Button, type ButtonProps };
@@ -3,8 +3,7 @@ import { Tile } from '@carbon/react';
3
3
  export { ClickableTile, ExpandableTile, SelectableTile, TileAboveTheFoldContent, TileBelowTheFoldContent } from '@carbon/react';
4
4
 
5
5
  type CarbonTileProps = React.ComponentProps<typeof Tile>;
6
- interface CardProps extends CarbonTileProps {
7
- }
6
+ type CardProps = CarbonTileProps;
8
7
  declare function Card({ className, ...props }: CardProps): React.JSX.Element;
9
8
  declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
10
9
  declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -2,8 +2,7 @@ import * as React from 'react';
2
2
  import { Checkbox as Checkbox$1 } from '@carbon/react';
3
3
 
4
4
  type CarbonCheckboxProps = React.ComponentProps<typeof Checkbox$1>;
5
- interface CheckboxProps extends CarbonCheckboxProps {
6
- }
5
+ type CheckboxProps = CarbonCheckboxProps;
7
6
  declare function Checkbox({ className, id, ...props }: CheckboxProps): React.JSX.Element;
8
7
 
9
8
  export { Checkbox, type CheckboxProps };
@@ -2,8 +2,7 @@ import * as React from 'react';
2
2
  import { CodeSnippet as CodeSnippet$1 } from '@carbon/react';
3
3
 
4
4
  type CarbonCodeSnippetProps = React.ComponentProps<typeof CodeSnippet$1>;
5
- interface CodeSnippetProps extends CarbonCodeSnippetProps {
6
- }
5
+ type CodeSnippetProps = CarbonCodeSnippetProps;
7
6
  declare function CodeSnippet({ className, ...props }: CodeSnippetProps): React.JSX.Element;
8
7
 
9
8
  export { CodeSnippet, type CodeSnippetProps };
@@ -3,10 +3,8 @@ import { DatePicker as DatePicker$1, DatePickerInput as DatePickerInput$1 } from
3
3
 
4
4
  type CarbonDatePickerProps = React.ComponentProps<typeof DatePicker$1>;
5
5
  type CarbonDatePickerInputProps = React.ComponentProps<typeof DatePickerInput$1>;
6
- interface DatePickerProps extends CarbonDatePickerProps {
7
- }
8
- interface DatePickerInputProps extends CarbonDatePickerInputProps {
9
- }
6
+ type DatePickerProps = CarbonDatePickerProps;
7
+ type DatePickerInputProps = CarbonDatePickerInputProps;
10
8
  declare function DatePicker({ className, ...props }: DatePickerProps): React.JSX.Element;
11
9
  declare function DatePickerInput({ className, id, ...props }: DatePickerInputProps): React.JSX.Element;
12
10
 
@@ -6,14 +6,10 @@ type CarbonComposedModalProps = React.ComponentProps<typeof ComposedModal>;
6
6
  type CarbonModalHeaderProps = React.ComponentProps<typeof ModalHeader>;
7
7
  type CarbonModalBodyProps = React.ComponentProps<typeof ModalBody>;
8
8
  type CarbonModalFooterProps = React.ComponentProps<typeof ModalFooter>;
9
- interface DialogProps extends CarbonComposedModalProps {
10
- }
11
- interface DialogHeaderProps extends CarbonModalHeaderProps {
12
- }
13
- interface DialogContentProps extends CarbonModalBodyProps {
14
- }
15
- interface DialogFooterProps extends CarbonModalFooterProps {
16
- }
9
+ type DialogProps = CarbonComposedModalProps;
10
+ type DialogHeaderProps = CarbonModalHeaderProps;
11
+ type DialogContentProps = CarbonModalBodyProps;
12
+ type DialogFooterProps = CarbonModalFooterProps;
17
13
  declare function Dialog({ className, ...props }: DialogProps): React.JSX.Element;
18
14
  declare function DialogHeader({ className, ...props }: DialogHeaderProps): React.JSX.Element;
19
15
  declare function DialogContent({ className, ...props }: DialogContentProps): React.JSX.Element;
@@ -3,10 +3,8 @@ import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
3
3
 
4
4
  type CarbonOverflowMenuProps = React.ComponentProps<typeof OverflowMenu>;
5
5
  type CarbonOverflowMenuItemProps = React.ComponentProps<typeof OverflowMenuItem>;
6
- interface DropdownMenuProps extends CarbonOverflowMenuProps {
7
- }
8
- interface DropdownMenuItemProps extends CarbonOverflowMenuItemProps {
9
- }
6
+ type DropdownMenuProps = CarbonOverflowMenuProps;
7
+ type DropdownMenuItemProps = CarbonOverflowMenuItemProps;
10
8
  declare function DropdownMenu({ className, ...props }: DropdownMenuProps): React.JSX.Element;
11
9
  declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): React.JSX.Element;
12
10
 
@@ -2,8 +2,7 @@ import * as React from 'react';
2
2
  import { TextInput } from '@carbon/react';
3
3
 
4
4
  type CarbonTextInputProps = React.ComponentProps<typeof TextInput>;
5
- interface InputProps extends CarbonTextInputProps {
6
- }
5
+ type InputProps = CarbonTextInputProps;
7
6
  declare function Input({ className, id, ...props }: InputProps): React.JSX.Element;
8
7
 
9
8
  export { Input, type InputProps };
@@ -3,10 +3,8 @@ import { Loading as Loading$1, InlineLoading } from '@carbon/react';
3
3
 
4
4
  type CarbonLoadingProps = React.ComponentProps<typeof Loading$1>;
5
5
  type CarbonInlineLoadingProps = React.ComponentProps<typeof InlineLoading>;
6
- interface LoadingProps extends CarbonLoadingProps {
7
- }
8
- interface SpinnerProps extends CarbonInlineLoadingProps {
9
- }
6
+ type LoadingProps = CarbonLoadingProps;
7
+ type SpinnerProps = CarbonInlineLoadingProps;
10
8
  declare function Loading({ className, ...props }: LoadingProps): React.JSX.Element;
11
9
  declare function Spinner({ className, ...props }: SpinnerProps): React.JSX.Element;
12
10
 
@@ -2,8 +2,7 @@ import * as React from 'react';
2
2
  import { NumberInput as NumberInput$1 } from '@carbon/react';
3
3
 
4
4
  type CarbonNumberInputProps = React.ComponentProps<typeof NumberInput$1>;
5
- interface NumberInputProps extends CarbonNumberInputProps {
6
- }
5
+ type NumberInputProps = CarbonNumberInputProps;
7
6
  declare function NumberInput({ className, id, ...props }: NumberInputProps): React.JSX.Element;
8
7
 
9
8
  export { NumberInput, type NumberInputProps };
@@ -3,10 +3,8 @@ import { Pagination as Pagination$1, PaginationNav as PaginationNav$1 } from '@c
3
3
 
4
4
  type CarbonPaginationProps = React.ComponentProps<typeof Pagination$1>;
5
5
  type CarbonPaginationNavProps = React.ComponentProps<typeof PaginationNav$1>;
6
- interface PaginationProps extends CarbonPaginationProps {
7
- }
8
- interface PaginationNavProps extends CarbonPaginationNavProps {
9
- }
6
+ type PaginationProps = CarbonPaginationProps;
7
+ type PaginationNavProps = CarbonPaginationNavProps;
10
8
  /**
11
9
  * Pagination (Table Bar)
12
10
  * - Advanced: Items per page selector + page info + nav
@@ -3,10 +3,8 @@ import { Popover as Popover$1, PopoverContent as PopoverContent$1 } from '@carbo
3
3
 
4
4
  type CarbonPopoverProps = React.ComponentProps<typeof Popover$1>;
5
5
  type CarbonPopoverContentProps = React.ComponentProps<typeof PopoverContent$1>;
6
- interface PopoverProps extends CarbonPopoverProps {
7
- }
8
- interface PopoverContentProps extends CarbonPopoverContentProps {
9
- }
6
+ type PopoverProps = CarbonPopoverProps;
7
+ type PopoverContentProps = CarbonPopoverContentProps;
10
8
  declare function Popover({ className, ...props }: PopoverProps): React.JSX.Element;
11
9
  declare function PopoverContent({ className, ...props }: PopoverContentProps): React.JSX.Element;
12
10
 
@@ -3,8 +3,7 @@ import { ProgressBar } from '@carbon/react';
3
3
  export { ProgressIndicator, ProgressStep } from '@carbon/react';
4
4
 
5
5
  type CarbonProgressBarProps = React.ComponentProps<typeof ProgressBar>;
6
- interface ProgressProps extends CarbonProgressBarProps {
7
- }
6
+ type ProgressProps = CarbonProgressBarProps;
8
7
  declare function Progress({ className, ...props }: ProgressProps): React.JSX.Element;
9
8
 
10
9
  export { Progress, type ProgressProps };
@@ -3,10 +3,8 @@ import { RadioButtonGroup, RadioButton } from '@carbon/react';
3
3
 
4
4
  type CarbonRadioButtonGroupProps = React.ComponentProps<typeof RadioButtonGroup>;
5
5
  type CarbonRadioButtonProps = React.ComponentProps<typeof RadioButton>;
6
- interface RadioGroupProps extends CarbonRadioButtonGroupProps {
7
- }
8
- interface RadioGroupItemProps extends CarbonRadioButtonProps {
9
- }
6
+ type RadioGroupProps = CarbonRadioButtonGroupProps;
7
+ type RadioGroupItemProps = CarbonRadioButtonProps;
10
8
  declare function RadioGroup({ className, ...props }: RadioGroupProps): React.JSX.Element;
11
9
  declare function RadioGroupItem({ className, id, ...props }: RadioGroupItemProps): React.JSX.Element;
12
10
 
@@ -2,8 +2,7 @@ import * as React from 'react';
2
2
  import { Search as Search$1 } from '@carbon/react';
3
3
 
4
4
  type CarbonSearchProps = React.ComponentProps<typeof Search$1>;
5
- interface SearchProps extends CarbonSearchProps {
6
- }
5
+ type SearchProps = CarbonSearchProps;
7
6
  declare function Search({ className, id, ...props }: SearchProps): React.JSX.Element;
8
7
 
9
8
  export { Search, type SearchProps };
@@ -3,10 +3,8 @@ import { Select as Select$1, SelectItem } from '@carbon/react';
3
3
 
4
4
  type CarbonSelectProps = React.ComponentProps<typeof Select$1>;
5
5
  type CarbonSelectItemProps = React.ComponentProps<typeof SelectItem>;
6
- interface SelectProps extends CarbonSelectProps {
7
- }
8
- interface SelectOptionProps extends CarbonSelectItemProps {
9
- }
6
+ type SelectProps = CarbonSelectProps;
7
+ type SelectOptionProps = CarbonSelectItemProps;
10
8
  declare function Select({ className, id, ...props }: SelectProps): React.JSX.Element;
11
9
  declare function SelectOption(props: SelectOptionProps): React.JSX.Element;
12
10
 
@@ -4,10 +4,8 @@ export { AccordionSkeleton, ButtonSkeleton, SearchSkeleton, SkeletonIcon, TagSke
4
4
 
5
5
  type CarbonSkeletonTextProps = React.ComponentProps<typeof SkeletonText>;
6
6
  type CarbonSkeletonPlaceholderProps = React.ComponentProps<typeof SkeletonPlaceholder>;
7
- interface SkeletonProps extends CarbonSkeletonTextProps {
8
- }
9
- interface SkeletonBoxProps extends CarbonSkeletonPlaceholderProps {
10
- }
7
+ type SkeletonProps = CarbonSkeletonTextProps;
8
+ type SkeletonBoxProps = CarbonSkeletonPlaceholderProps;
11
9
  declare function Skeleton({ className, ...props }: SkeletonProps): React.JSX.Element;
12
10
  declare function SkeletonBox({ className, ...props }: SkeletonBoxProps): React.JSX.Element;
13
11
 
@@ -2,8 +2,7 @@ import * as React from 'react';
2
2
  import { Slider as Slider$1 } from '@carbon/react';
3
3
 
4
4
  type CarbonSliderProps = React.ComponentProps<typeof Slider$1>;
5
- interface SliderProps extends CarbonSliderProps {
6
- }
5
+ type SliderProps = CarbonSliderProps;
7
6
  declare function Slider({ className, id, ...props }: SliderProps): React.JSX.Element;
8
7
 
9
8
  export { Slider, type SliderProps };
@@ -2,8 +2,7 @@ import * as React from 'react';
2
2
  import { Toggle } from '@carbon/react';
3
3
 
4
4
  type CarbonToggleProps = React.ComponentProps<typeof Toggle>;
5
- interface SwitchProps extends CarbonToggleProps {
6
- }
5
+ type SwitchProps = CarbonToggleProps;
7
6
  declare function Switch({ className, id, ...props }: SwitchProps): React.JSX.Element;
8
7
 
9
8
  export { Switch, type SwitchProps };
@@ -2,8 +2,7 @@ import * as React from 'react';
2
2
  import { TextArea } from '@carbon/react';
3
3
 
4
4
  type CarbonTextAreaProps = React.ComponentProps<typeof TextArea>;
5
- interface TextareaProps extends CarbonTextAreaProps {
6
- }
5
+ type TextareaProps = CarbonTextAreaProps;
7
6
  declare function Textarea({ className, id, ...props }: TextareaProps): React.JSX.Element;
8
7
 
9
8
  export { Textarea, type TextareaProps };
@@ -4,10 +4,8 @@ export { DefinitionTooltip, ToggletipActions, ToggletipButton, ToggletipContent
4
4
 
5
5
  type CarbonTooltipProps = React.ComponentProps<typeof Tooltip$1>;
6
6
  type CarbonToggletipProps = React.ComponentProps<typeof Toggletip>;
7
- interface TooltipProps extends CarbonTooltipProps {
8
- }
9
- interface TooltipInfoProps extends CarbonToggletipProps {
10
- }
7
+ type TooltipProps = CarbonTooltipProps;
8
+ type TooltipInfoProps = CarbonToggletipProps;
11
9
  declare function Tooltip({ className, ...props }: TooltipProps): React.JSX.Element;
12
10
  declare function TooltipInfo({ className, ...props }: TooltipInfoProps): React.JSX.Element;
13
11
 
@@ -1,2 +1,2 @@
1
- /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
2
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}
package/package.json CHANGED
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "@plus-experience/design-system-carbon",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org",
7
7
  "access": "public"
8
8
  },
9
+ "license": "MIT",
9
10
  "repository": {
10
11
  "type": "git",
11
12
  "url": "https://github.com/plus-experience/design-system-carbon.git"
@@ -27,7 +28,8 @@
27
28
  "app/carbon.scss",
28
29
  "bin",
29
30
  "VIBECODING.md",
30
- "DESIGN_SYSTEM.md"
31
+ "DESIGN_SYSTEM.md",
32
+ "LICENSE"
31
33
  ],
32
34
  "scripts": {
33
35
  "dev": "next dev",
@@ -42,10 +44,11 @@
42
44
  "@carbon/icons-react": "^11.55.0",
43
45
  "@carbon/react": "^1.76.0",
44
46
  "@eslint/eslintrc": "^3.3.5",
47
+ "@ibm/plex": "^6.4.1",
45
48
  "class-variance-authority": "^0.7.1",
46
49
  "clsx": "^2.1.1",
47
50
  "date-fns": "^4.1.0",
48
- "next": "15.3.2",
51
+ "next": "^15.5.16",
49
52
  "next-themes": "^0.4.6",
50
53
  "react": "^19.1.0",
51
54
  "react-dom": "^19.1.0",
@@ -58,7 +61,7 @@
58
61
  "@types/react": "^19",
59
62
  "@types/react-dom": "^19",
60
63
  "eslint": "^9",
61
- "eslint-config-next": "15.3.2",
64
+ "eslint-config-next": "^15.5.16",
62
65
  "sass": "^1.87.0",
63
66
  "tailwindcss": "^4",
64
67
  "tsup": "^8.5.1",