@akad/design-system 1.1.2 → 1.1.3

package/react/src/components/atoms/Chip/Chip.config.d.ts

@@ -0,0 +1,43 @@
+export declare enum ChipColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Info = "info",
+    Success = "success",
+    Danger = "danger",
+    Warning = "warning",
+    Neutral = "neutral"
+}
+export declare enum ChipVariant {
+    Solid = "solid",
+    Light = "light"
+}
+export declare enum ChipIconPosition {
+    Left = "left",
+    Right = "right"
+}
+export interface ChipColorProps {
+    type: StringConstructor;
+    default: ChipColor;
+    options: ChipColor[];
+}
+export interface ChipVariantProps {
+    type: StringConstructor;
+    default: ChipVariant;
+    options: ChipVariant[];
+}
+export interface ChipIconPositionProps {
+    type: StringConstructor;
+    default: ChipIconPosition;
+    options: ChipIconPosition[];
+}
+export interface ChipConfig {
+    name: string;
+    class: string;
+    props: {
+        color: ChipColorProps;
+        variant: ChipVariantProps;
+        iconPosition: ChipIconPositionProps;
+    };
+}
+declare const chipConfig: ChipConfig;
+export default chipConfig;

package/react/src/components/atoms/Chip/Chip.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { ChipColor, ChipIconPosition, ChipVariant } from './Chip.config';
+
+export interface DsChipProps {
+    label: React.ReactNode;
+    color?: ChipColor;
+    variant?: ChipVariant;
+    icon?: React.ReactNode;
+    iconPosition?: ChipIconPosition;
+    className?: string;
+    title?: string;
+    testId?: string;
+}
+declare const DsChip: React.FC<DsChipProps>;
+export default DsChip;

package/react/src/components/atoms/Chip/Chip.stories.d.ts

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/react';
+import { DsChipProps } from './Chip';
+import { ChipColor, ChipIconPosition, ChipVariant } from './Chip.config';
+
+declare const componentProps: Meta;
+export default componentProps;
+export declare const Default: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsChipProps>;
+    args: {
+        label: string;
+        color: ChipColor;
+        variant: ChipVariant;
+    };
+};
+export declare const WithIconLeft: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsChipProps>;
+    args: {
+        label: string;
+        color: ChipColor;
+        icon: import("react/jsx-runtime").JSX.Element;
+        variant: ChipVariant;
+    };
+};
+export declare const WithIconRight: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsChipProps>;
+    args: {
+        label: string;
+        color: ChipColor;
+        variant: ChipVariant;
+        icon: import("react/jsx-runtime").JSX.Element;
+        iconPosition: ChipIconPosition;
+    };
+};

package/react/src/components/atoms/Chip/Chip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/react/src/components/atoms/Chip/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Chip';
+export * from './Chip.config';
+export { default as chipConfig } from './Chip.config';
+export { default as DsChip } from './Chip';

package/react/src/components/atoms/Radio/Radio.config.d.ts

@@ -0,0 +1,21 @@
+export declare enum RadioVariant {
+    Default = "default",
+    Card = "card"
+}
+export interface RadioConfig {
+    name: string;
+    class: string;
+    props: {
+        variant: {
+            type: StringConstructor;
+            default: RadioVariant;
+            options: RadioVariant[];
+        };
+        fullWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    };
+}
+declare const radioConfig: RadioConfig;
+export default radioConfig;

package/react/src/components/atoms/Radio/Radio.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { RadioVariant } from './Radio.config';
+
+export interface DsRadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children' | 'className' | 'size'> {
+    variant?: RadioVariant;
+    fullWidth?: boolean;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    className?: string;
+    testId?: string;
+}
+declare const DsRadio: React.ForwardRefExoticComponent<DsRadioProps & React.RefAttributes<HTMLInputElement>>;
+export default DsRadio;

package/react/src/components/atoms/Radio/Radio.stories.d.ts

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/react';
+import { DsRadioProps } from './Radio';
+import { RadioVariant } from './Radio.config';
+
+declare const meta: Meta<DsRadioProps>;
+export default meta;
+export declare const Default: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsRadioProps>;
+    args: {
+        label: string;
+        name: string;
+        value: string;
+    };
+};
+export declare const WithDescription: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsRadioProps>;
+    args: {
+        label: string;
+        description: string;
+        name: string;
+        value: string;
+    };
+};
+export declare const Disabled: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsRadioProps>;
+    args: {
+        label: string;
+        description: string;
+        disabled: boolean;
+        name: string;
+        value: string;
+    };
+};
+export declare const Card: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsRadioProps>;
+    args: {
+        variant: RadioVariant;
+        label: string;
+        description: string;
+        name: string;
+        value: string;
+    };
+};
+export declare const CardGroupVertical: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CardGroupHorizontal: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/react/src/components/atoms/Radio/Radio.test.d.ts

@@ -0,0 +1 @@
+export {};

package/react/src/components/atoms/Radio/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Radio';
+export * from './Radio.config';
+export { default as radioConfig } from './Radio.config';
+export { default as DsRadio } from './Radio';

package/react/src/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './atoms/Button';
 export * from './atoms/Caption';
 export * from './atoms/Card';
 export * from './atoms/Checkbox';
+export * from './atoms/Chip';
 export * from './atoms/Heading';
 export * from './atoms/HorizontalRule';
 export * from './atoms/Icon';
@@ -10,6 +11,7 @@ export * from './atoms/Loading';
 export * from './atoms/Option';
 export * from './atoms/Paragraph';
 export * from './atoms/Progress';
+export * from './atoms/Radio';
 export * from './atoms/Select';
 export * from './atoms/Subtitle';
 export * from './atoms/TextArea';

package/react/src/components/molecules/Tabs/Tab.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { DsTabProps } from './Tabs';
+import { DsTabRenderProps } from './types';
 
-declare const DsTab: React.FC<DsTabProps>;
+declare const DsTab: React.FC<DsTabRenderProps>;
 export default DsTab;

package/react/src/components/molecules/Tabs/Tabs.config.d.ts

@@ -8,6 +8,10 @@ export declare enum TabsColor {
     Danger = "danger",
     Info = "info"
 }
+export declare enum TabsVariant {
+    Segmented = "segmented",
+    Navigation = "navigation"
+}
 export interface TabsTabsProps {
     type: ArrayConstructor;
     required: boolean;
@@ -29,6 +33,11 @@ export interface TabsOnChangeProps {
     type: FunctionConstructor;
     default: () => void;
 }
+export interface TabsVariantProps {
+    type: StringConstructor;
+    default: TabsVariant;
+    options: TabsVariant[];
+}
 export interface TabsConfig {
     name: string;
     class: string;
@@ -36,6 +45,7 @@ export interface TabsConfig {
         tabs: TabsTabsProps;
         selectedTab: TabsSelectedTabProps;
         color: TabsColorProps;
+        variant: TabsVariantProps;
         className: TabsClassNameProps;
         onChange: TabsOnChangeProps;
     };

package/react/src/components/molecules/Tabs/Tabs.d.ts

@@ -1,22 +1,18 @@
 import { default as React } from 'react';
+import { TabsVariant } from './Tabs.config';
+import { DsTabProps } from './types';
 
-export interface DsTabProps {
-    active?: boolean;
-    className?: string;
-    color?: string;
-    content: React.ReactNode | string;
-    disabled?: boolean;
-    name?: string;
-    index: number;
-    title: React.ReactNode | string;
-    onClick?: (index: number) => void;
-}
+export type { DsTabProps } from './types';
 export interface DsTabsProps {
     tabs: DsTabProps[];
     selectedTab?: number;
     color?: string;
     className?: string;
+    variant?: TabsVariant;
     onChange?: (index: number) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    rootDataTestId?: string;
 }
 declare const DsTabs: React.FC<DsTabsProps>;
 export default DsTabs;

package/react/src/components/molecules/Tabs/Tabs.stories.d.ts

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/react';
 import { DsTabsProps } from './Tabs';
+import { TabsVariant } from './Tabs.config';
 
 declare const componentProps: Meta;
 export default componentProps;
@@ -8,6 +9,7 @@ export declare const Default: {
     args: {
         color: import('../../../main').TabsColor;
         selectedTab: number;
+        variant: TabsVariant;
         tabs: ({
             name: string;
             title: import("react/jsx-runtime").JSX.Element;
@@ -22,3 +24,17 @@ export declare const Default: {
         onChange: import('@storybook/addon-actions').HandlerFunction;
     };
 };
+export declare const Navigation: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsTabsProps>;
+    args: {
+        tabs: {
+            name: string;
+            title: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        variant: TabsVariant;
+        color: import('../../../main').TabsColor;
+        selectedTab: number;
+        onChange: import('@storybook/addon-actions').HandlerFunction;
+    };
+};

package/react/src/components/molecules/Tabs/index.d.ts

@@ -1,3 +1,4 @@
+export * from './types';
 export * from './Tabs';
 export * from './Tabs.config';
 export { default as DsTabs } from './Tabs';

package/react/src/components/molecules/Tabs/types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { TabsVariant } from './Tabs.config';
+
+export interface DsTabProps {
+    active?: boolean;
+    className?: string;
+    color?: string;
+    content?: ReactNode | string;
+    disabled?: boolean;
+    hidden?: boolean;
+    name?: string;
+    index: number;
+    title: ReactNode | string;
+    onClick?: (index: number) => void;
+    tabDataTestId?: string;
+    panelDataTestId?: string;
+}
+export type DsTabRenderProps = DsTabProps & {
+    variant: TabsVariant;
+    tabDomId: string;
+    panelDomId?: string;
+    hasPanel: boolean;
+};

package/scss/core/components/atoms/chip.scss

@@ -0,0 +1,101 @@
+$chip__font--family: var(--font__family--base) !default;
+$chip__font--weight: $font__weight--semibold !default;
+$chip__font--size: $font__size--xs !default;
+$chip__font--style: normal !default;
+$chip__line-height: 1.25 !default;
+$chip__letter-spacing: 0 !default;
+$chip__padding--y: $spacing__inset--quark !default; // 4px
+$chip__padding--x: $spacing__inset--quark + $spacing__inset--nano !default; // 4px + 8px = 12px
+$chip__min-height: $spacing__inset--sm !default; // 24px
+$chip__border-radius: $border__radius--sm !default;
+$chip__border-width: $border__width--hairline !default;
+$chip__icon--gap: 6px !default;
+$chip__colors: primary, secondary, success, danger, warning, info, neutral;
+$chip__solid: (
+  'bg__primary': var(--color__primary),
+  'text__primary': var(--color__neutral--00),
+  'bg__secondary': var(--color__secondary),
+  'text__secondary': var(--color__neutral--00),
+  'bg__success': var(--color__success),
+  'text__success': var(--color__neutral--00),
+  'bg__danger': var(--color__danger),
+  'text__danger': var(--color__neutral--00),
+  'bg__warning': var(--color__warning),
+  'text__warning': var(--color__neutral--90),
+  'bg__info': var(--color__info),
+  'text__info': var(--color__neutral--00),
+  'bg__neutral': var(--color__neutral--80),
+  'text__neutral': var(--color__neutral--00),
+) !default;
+$chip__light: (
+  'bg__primary': var(--color__primary--lighter),
+  'text__primary': var(--color__primary--dark),
+  'bg__secondary': var(--color__secondary--lighter),
+  'text__secondary': var(--color__secondary--dark),
+  'bg__success': var(--color__success--lighter),
+  'text__success': var(--color__success--dark),
+  'bg__danger': var(--color__danger--lighter),
+  'text__danger': var(--color__danger--dark),
+  'bg__warning': var(--color__warning--lighter),
+  'text__warning': var(--color__warning--dark),
+  'bg__info': var(--color__info--lighter),
+  'text__info': var(--color__info--dark),
+  'bg__neutral': var(--color__neutral--20),
+  'text__neutral': var(--color__neutral--80),
+) !default;
+
+.ds-chip {
+  --chip__border-radius: #{$chip__border-radius};
+  --chip__border-width: #{$chip__border-width};
+  --chip__min-height: #{$chip__min-height};
+  --chip__padding: #{$chip__padding--y} #{$chip__padding--x};
+  --chip__icon-gap: #{$chip__icon--gap};
+
+  align-items: center;
+  border: none;
+  border-radius: var(--chip__border-radius);
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: $chip__font--family;
+  font-size: $chip__font--size;
+  font-style: $chip__font--style;
+  font-weight: $chip__font--weight;
+  gap: var(--chip__icon-gap);
+  justify-content: center;
+  letter-spacing: $chip__letter-spacing;
+  line-height: $chip__line-height;
+  margin: 0;
+  max-width: 100%;
+  min-height: var(--chip__min-height);
+  padding: var(--chip__padding);
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__icon {
+    align-items: center;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  @each $color in $chip__colors {
+    &__#{$color} {
+      &--solid {
+        background-color: get-token($chip__solid, 'bg__' + $color);
+        color: get-token($chip__solid, 'text__' + $color);
+      }
+
+      &--light {
+        background-color: get-token($chip__light, 'bg__' + $color);
+        color: get-token($chip__light, 'text__' + $color);
+      }
+    }
+  }
+}

package/scss/core/components/atoms/radio-card.scss

@@ -0,0 +1,117 @@
+$radio-card__padding: $spacing__inset--quark + $spacing__inset--nano !default;
+$radio-card__gap: $spacing__inset--quark + $spacing__inset--nano !default;
+$radio-card__min-height: $spacing--lg !default;
+$radio-card__text-gap: $spacing--quark !default;
+$radio-card__border-radius: $border__radius--sm !default;
+$radio-card__border-width: $border__width--hairline !default;
+$radio-card__outline-width: $border__width--thin !default;
+
+// Tipografia
+$radio-card__font--family: var(--font__family--base) !default;
+$radio-card__font--size: $font__size--xs !default;
+$radio-card__font--weight: $font__weight--semibold !default;
+$radio-card__line-height: 1.5 !default;
+
+// Cores (light)
+$radio-card__bg: var(--color__neutral--00) !default;
+$radio-card__border: var(--color__neutral--30) !default;
+$radio-card__bg--checked: var(--color__neutral--05) !default;
+$radio-card__border--checked: var(--color__neutral--80) !default;
+$radio-card__text: var(--color__neutral--80) !default;
+
+// Cores (dark)
+$radio-card__bg--dark: var(--color__neutral--90) !default;
+$radio-card__border--dark: var(--color__neutral--60) !default;
+$radio-card__text--dark: var(--color__neutral--10) !default;
+$radio-card__bg--checked-dark: var(--color__neutral--80) !default;
+$radio-card__border--checked-dark: var(--color__neutral--30) !default;
+$radio-card__disabled-opacity: 0.55 !default;
+
+@mixin radio-card-wrapper {
+  align-items: center;
+  background-color: #{$radio-card__bg};
+  border: $radio-card__border-width solid #{$radio-card__border};
+  border-radius: $radio-card__border-radius;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: $radio-card__font--family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  gap: $radio-card__gap;
+  min-height: $radio-card__min-height;
+  padding: $radio-card__padding;
+  position: relative;
+  width: fit-content;
+}
+
+@mixin radio-card-wrapper-checked {
+  background-color: #{$radio-card__bg--checked};
+  border-color: #{$radio-card__border--checked};
+}
+
+@mixin radio-card-wrapper-focus-visible {
+  outline: $radio-card__outline-width solid #{$radio-card__border--checked};
+  outline-offset: $radio-card__outline-width;
+}
+
+@mixin radio-card-wrapper-disabled {
+  cursor: not-allowed;
+  opacity: $radio-card__disabled-opacity;
+  pointer-events: none;
+}
+
+@mixin radio-card-input-hidden {
+  cursor: pointer;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  z-index: 1;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+@mixin radio-card-text-block {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: $radio-card__text-gap;
+  justify-content: center;
+  min-width: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+@mixin radio-card-text-style {
+  color: #{$radio-card__text};
+  font-family: inherit;
+  font-size: $radio-card__font--size;
+  font-style: normal;
+  font-weight: $radio-card__font--weight;
+  letter-spacing: 0;
+  line-height: $radio-card__line-height;
+  vertical-align: middle;
+}
+
+@mixin radio-card-dark-mode {
+  background-color: #{$radio-card__bg--dark};
+  border-color: #{$radio-card__border--dark};
+  color: #{$radio-card__text--dark};
+
+  .ds-radio__label,
+  .ds-radio__description {
+    color: #{$radio-card__text--dark};
+  }
+}
+
+@mixin radio-card-dark-mode-checked {
+  background-color: #{$radio-card__bg--checked-dark};
+  border-color: #{$radio-card__border--checked-dark};
+}
+
+@mixin radio-card-dark-mode-focus-visible {
+  outline-color: #{$radio-card__border--checked-dark};
+}