react-restyle-components 0.4.23 → 0.4.24

package/lib/src/core-components/src/components/Chip/elements.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { ChipVariant, ChipSize, ChipColor } from './types';
+export declare const ChipElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $variant: ChipVariant;
+    $size: ChipSize;
+    $color: ChipColor;
+    $selected: boolean;
+    $disabled: boolean;
+}>> & string;
+export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: ChipSize;
+    $side: 'left' | 'right';
+}>> & string;
+export declare const AvatarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: ChipSize;
+}>> & string;
+export declare const DeleteButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: ChipSize;
+}>> & string;
+export declare const ChipLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const ChipGroupElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $gap: string;
+    $wrap: boolean;
+    $scrollable: boolean;
+    $direction: 'row' | 'column';
+}>> & string;
+//# sourceMappingURL=elements.d.ts.map

package/lib/src/core-components/src/components/Chip/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Chip/elements.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AA2IzD,eAAO,MAAM,WAAW;cACZ,WAAW;WACd,QAAQ;YACP,SAAS;eACN,OAAO;eACP,OAAO;YAmDnB,CAAC;AAEF,eAAO,MAAM,WAAW;WACf,QAAQ;WACR,MAAM,GAAG,OAAO;YAsBxB,CAAC;AAEF,eAAO,MAAM,aAAa;WACjB,QAAQ;YAoBhB,CAAC;AAEF,eAAO,MAAM,YAAY;WAChB,QAAQ;YAsBhB,CAAC;AAEF,eAAO,MAAM,SAAS,+NAErB,CAAC;AAEF,eAAO,MAAM,gBAAgB;UACrB,MAAM;WACL,OAAO;iBACD,OAAO;gBACR,KAAK,GAAG,QAAQ;YAkC7B,CAAC"}

package/lib/src/core-components/src/components/Chip/elements.js

@@ -0,0 +1,253 @@
+import { styled, css } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+// Size configurations
+const sizeConfig = {
+    small: {
+        height: '24px',
+        padding: '0 8px',
+        fontSize: '0.75rem',
+        iconSize: '14px',
+        gap: '4px',
+        borderRadius: '12px',
+    },
+    medium: {
+        height: '32px',
+        padding: '0 12px',
+        fontSize: '0.8125rem',
+        iconSize: '16px',
+        gap: '6px',
+        borderRadius: '16px',
+    },
+    large: {
+        height: '40px',
+        padding: '0 16px',
+        fontSize: '0.875rem',
+        iconSize: '18px',
+        gap: '8px',
+        borderRadius: '20px',
+    },
+};
+// Color configurations
+const colorConfig = {
+    default: {
+        filled: { bg: tokens.onSurface || '#1a1a2e', text: '#fff', hover: '#2d2d42' },
+        outlined: {
+            border: tokens.outline || '#d1d5db',
+            text: tokens.onSurface || '#1a1a2e',
+            hover: '#f3f4f6',
+        },
+        soft: {
+            bg: tokens.surface || '#f3f4f6',
+            text: tokens.onSurface || '#1a1a2e',
+            hover: '#e5e7eb',
+        },
+    },
+    primary: {
+        filled: { bg: tokens.primary || '#454cbf', text: '#fff', hover: '#3d44a5' },
+        outlined: {
+            border: tokens.primary || '#454cbf',
+            text: tokens.primary || '#454cbf',
+            hover: '#e7e8f8',
+        },
+        soft: { bg: '#e7e8f8', text: tokens.primary || '#454cbf', hover: '#d4d6f4' },
+    },
+    success: {
+        filled: { bg: '#10b981', text: '#fff', hover: '#059669' },
+        outlined: { border: '#10b981', text: '#10b981', hover: '#ecfdf5' },
+        soft: { bg: '#ecfdf5', text: '#065f46', hover: '#d1fae5' },
+    },
+    warning: {
+        filled: { bg: '#f59e0b', text: '#fff', hover: '#d97706' },
+        outlined: { border: '#f59e0b', text: '#f59e0b', hover: '#fffbeb' },
+        soft: { bg: '#fffbeb', text: '#92400e', hover: '#fef3c7' },
+    },
+    error: {
+        filled: { bg: '#ef4444', text: '#fff', hover: '#dc2626' },
+        outlined: { border: '#ef4444', text: '#ef4444', hover: '#fef2f2' },
+        soft: { bg: '#fef2f2', text: '#991b1b', hover: '#fee2e2' },
+    },
+    info: {
+        filled: { bg: '#3b82f6', text: '#fff', hover: '#2563eb' },
+        outlined: { border: '#3b82f6', text: '#3b82f6', hover: '#e7f3ff' },
+        soft: { bg: '#e7f3ff', text: '#1e40af', hover: '#dbeafe' },
+    },
+};
+const getVariantStyles = (variant, color, selected) => {
+    const colorSet = colorConfig[color];
+    if (variant === 'filled') {
+        const config = colorSet.filled;
+        return css `
+      background: ${selected ? config.hover : config.bg};
+      color: ${config.text};
+      border: 2px solid transparent;
+
+      &:hover:not(:disabled) {
+        background: ${config.hover};
+      }
+    `;
+    }
+    if (variant === 'outlined') {
+        const config = colorSet.outlined;
+        return css `
+      background: ${selected ? config.hover : 'transparent'};
+      color: ${config.text};
+      border: 2px solid ${config.border};
+
+      &:hover:not(:disabled) {
+        background: ${config.hover};
+      }
+    `;
+    }
+    // soft
+    const config = colorSet.soft;
+    return css `
+    background: ${selected ? config.hover : config.bg};
+    color: ${config.text};
+    border: 2px solid transparent;
+
+    &:hover:not(:disabled) {
+      background: ${config.hover};
+    }
+  `;
+};
+export const ChipElement = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ $size }) => sizeConfig[$size].gap};
+  height: ${({ $size }) => sizeConfig[$size].height};
+  padding: ${({ $size }) => sizeConfig[$size].padding};
+  font-size: ${({ $size }) => sizeConfig[$size].fontSize};
+  font-weight: 500;
+  font-family: inherit;
+  border-radius: ${({ $size }) => sizeConfig[$size].borderRadius};
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+
+  ${({ $variant, $color, $selected }) => getVariantStyles($variant, $color, $selected)}
+
+  /* Selected state visual indicator */
+  ${({ $selected, $color, $variant }) => $selected &&
+    $variant === 'outlined' &&
+    css `
+      border-color: ${colorConfig[$color].outlined.text};
+      box-shadow: 0 0 0 1px ${colorConfig[$color].outlined.text};
+    `}
+  
+  /* Disabled state */
+  ${({ $disabled }) => $disabled &&
+    css `
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+  
+  /* Focus visible */
+  &:focus-visible {
+    box-shadow:
+      0 0 0 2px ${tokens.surface || '#fff'},
+      0 0 0 4px ${tokens.primary || '#454cbf'};
+  }
+
+  /* Active state */
+  &:active:not(:disabled) {
+    transform: scale(0.97);
+  }
+`;
+export const IconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${({ $size }) => sizeConfig[$size].iconSize};
+  height: ${({ $size }) => sizeConfig[$size].iconSize};
+
+  ${({ $side }) => $side === 'left'
+    ? css `
+          margin-left: -2px;
+        `
+    : css `
+          margin-right: -2px;
+        `}
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const AvatarWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${({ $size }) => $size === 'small' ? '18px' : $size === 'large' ? '28px' : '24px'};
+  height: ${({ $size }) => $size === 'small' ? '18px' : $size === 'large' ? '28px' : '24px'};
+  border-radius: 50%;
+  overflow: hidden;
+  margin-left: ${({ $size }) => $size === 'small' ? '-4px' : $size === 'large' ? '-10px' : '-6px'};
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+export const DeleteButton = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${({ $size }) => $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px'};
+  height: ${({ $size }) => $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px'};
+  border-radius: 50%;
+  margin-right: -4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const ChipLabel = styled.span `
+  line-height: 1;
+`;
+export const ChipGroupElement = styled.div `
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction};
+  gap: ${({ $gap }) => $gap};
+
+  ${({ $wrap }) => $wrap &&
+    css `
+      flex-wrap: wrap;
+    `}
+
+  ${({ $scrollable, $direction }) => $scrollable &&
+    css `
+      overflow-x: ${$direction === 'row' ? 'auto' : 'visible'};
+      overflow-y: ${$direction === 'column' ? 'auto' : 'visible'};
+      padding-bottom: ${$direction === 'row' ? '4px' : '0'};
+
+      /* Custom scrollbar */
+      &::-webkit-scrollbar {
+        height: 4px;
+        width: 4px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: ${tokens.outline || '#d1d5db'};
+        border-radius: 2px;
+      }
+    `}
+`;

package/lib/src/core-components/src/components/Chip/index.d.ts

@@ -0,0 +1,3 @@
+export { Chip, ChipGroup } from './Chip';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/components/Chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;AACvC,cAAc,SAAS,CAAC"}

package/lib/src/core-components/src/components/Chip/index.js

@@ -0,0 +1,2 @@
+export { Chip, ChipGroup } from './Chip';
+export * from './types';

package/lib/src/core-components/src/components/Chip/types.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export declare const CHIP_VARIANTS: readonly ["filled", "outlined", "soft"];
+export type ChipVariant = (typeof CHIP_VARIANTS)[number];
+export declare const CHIP_SIZES: readonly ["small", "medium", "large"];
+export type ChipSize = (typeof CHIP_SIZES)[number];
+export declare const CHIP_COLORS: readonly ["default", "primary", "success", "warning", "error", "info"];
+export type ChipColor = (typeof CHIP_COLORS)[number];
+export declare const CHIP_TYPES: readonly ["button", "selection", "filter", "input"];
+export type ChipType = (typeof CHIP_TYPES)[number];
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** Chip label text */
+    label: string;
+    /** Visual variant */
+    variant?: ChipVariant;
+    /** Size of the chip */
+    size?: ChipSize;
+    /** Color scheme */
+    color?: ChipColor;
+    /** Chip behavior type */
+    chipType?: ChipType;
+    /** Whether the chip is selected */
+    selected?: boolean;
+    /** Whether the chip is disabled */
+    disabled?: boolean;
+    /** Icon on the left side */
+    iconLeft?: React.ReactNode;
+    /** Icon on the right side */
+    iconRight?: React.ReactNode;
+    /** Show delete icon (for input type) */
+    deletable?: boolean;
+    /** Delete handler */
+    onDelete?: () => void;
+    /** Click handler */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Avatar or image on left */
+    avatar?: React.ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+export interface ChipGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Children chips */
+    children: React.ReactNode;
+    /** Gap between chips */
+    gap?: string;
+    /** Wrap chips */
+    wrap?: boolean;
+    /** Horizontal scroll on overflow */
+    scrollable?: boolean;
+    /** Direction */
+    direction?: 'row' | 'column';
+    /** Additional class name */
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/src/core-components/src/components/Chip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,aAAa,yCAA0C,CAAC;AACrE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,eAAO,MAAM,UAAU,uCAAwC,CAAC;AAChE,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnD,eAAO,MAAM,WAAW,wEAAyE,CAAC;AAClG,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,UAAU,qDAAsD,CAAC;AAC9E,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC5F,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mBAAmB;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,qBAAqB;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iBAAiB;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB;IAChB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/lib/src/core-components/src/components/Chip/types.js

@@ -0,0 +1,4 @@
+export const CHIP_VARIANTS = ['filled', 'outlined', 'soft'];
+export const CHIP_SIZES = ['small', 'medium', 'large'];
+export const CHIP_COLORS = ['default', 'primary', 'success', 'warning', 'error', 'info'];
+export const CHIP_TYPES = ['button', 'selection', 'filter', 'input'];

package/lib/src/core-components/src/components/Divider/Divider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DividerProps } from './types';
+export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Divider.d.ts.map

package/lib/src/core-components/src/components/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,OAAO,qFA4EnB,CAAC"}

package/lib/src/core-components/src/components/Divider/Divider.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { DividerContainer, DividerLine, DividerLabel } from './elements';
+export const Divider = forwardRef(function DividerComponent(props, ref) {
+    const { orientation = 'horizontal', variant = 'solid', size = 'thin', color = 'default', inset = '0', centerInset = false, label, labelPosition = 'center', className, ...rest } = props;
+    const hasLabel = Boolean(label);
+    // Calculate flex values for label positioning
+    const getFlexValues = () => {
+        if (!hasLabel)
+            return { start: 1, end: 0 };
+        switch (labelPosition) {
+            case 'start':
+                return { start: 0, end: 1 };
+            case 'end':
+                return { start: 1, end: 0 };
+            case 'center':
+            default:
+                return { start: 1, end: 1 };
+        }
+    };
+    const flexValues = getFlexValues();
+    return (_jsxs(DividerContainer, { ref: ref, "$orientation": orientation, "$variant": variant, "$size": size, "$color": color, "$inset": inset, "$centerInset": centerInset, "$hasLabel": hasLabel, role: "separator", "aria-orientation": orientation, "data-aui": "divider", className: className, ...rest, children: [flexValues.start > 0 && (_jsx(DividerLine, { "$orientation": orientation, "$variant": variant, "$size": size, "$color": color, "$flex": flexValues.start })), hasLabel && (_jsx(DividerLabel, { "$color": color, children: label })), flexValues.end > 0 && (_jsx(DividerLine, { "$orientation": orientation, "$variant": variant, "$size": size, "$color": color, "$flex": flexValues.end }))] }));
+});
+Divider.displayName = 'Divider';

package/lib/src/core-components/src/components/Divider/elements.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { DividerOrientation, DividerVariant, DividerSize, DividerColor } from './types';
+export declare const DividerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: DividerOrientation;
+    $variant: DividerVariant;
+    $size: DividerSize;
+    $color: DividerColor;
+    $inset: string;
+    $centerInset: boolean;
+    $hasLabel: boolean;
+}>> & string;
+export declare const DividerLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: DividerOrientation;
+    $variant: DividerVariant;
+    $size: DividerSize;
+    $color: DividerColor;
+    $flex?: number | undefined;
+}>> & string;
+export declare const DividerLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: DividerColor;
+}>> & string;
+//# sourceMappingURL=elements.d.ts.map

package/lib/src/core-components/src/components/Divider/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Divider/elements.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,kBAAkB,EAAE,cAAc,EAAE,WAAW,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAiBtF,eAAO,MAAM,gBAAgB;kBACb,kBAAkB;cACtB,cAAc;WACjB,WAAW;YACV,YAAY;YACZ,MAAM;kBACA,OAAO;eACV,OAAO;YAqBnB,CAAC;AAEF,eAAO,MAAM,WAAW;kBACR,kBAAkB;cACtB,cAAc;WACjB,WAAW;YACV,YAAY;;YA6DrB,CAAC;AAEF,eAAO,MAAM,YAAY;YACf,YAAY;YAWrB,CAAC"}

package/lib/src/core-components/src/components/Divider/elements.js

@@ -0,0 +1,103 @@
+import { styled, css } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+// Size values
+const sizeValues = {
+    thin: '1px',
+    medium: '2px',
+    thick: '4px',
+};
+// Color values
+const colorValues = {
+    default: tokens.outline || '#e9ecef',
+    primary: tokens.primary || '#454cbf',
+    subtle: tokens.outlineSoft || '#f1f3f5',
+    dark: '#374151',
+};
+export const DividerContainer = styled.div `
+  display: flex;
+  align-items: center;
+  
+  ${({ $orientation, $inset, $centerInset }) => $orientation === 'horizontal'
+    ? css `
+          width: ${$centerInset
+        ? `calc(100% - (${$inset} * 2))`
+        : `calc(100% - ${$inset})`};
+          margin-left: ${$inset};
+          ${$centerInset && `margin-right: ${$inset};`}
+          flex-direction: row;
+        `
+    : css `
+          height: 100%;
+          margin-top: ${$inset};
+          ${$centerInset && `margin-bottom: ${$inset};`}
+          flex-direction: column;
+        `}
+`;
+export const DividerLine = styled.div `
+  flex: ${({ $flex }) => $flex ?? 1};
+  
+  ${({ $orientation, $size, $variant, $color }) => $orientation === 'horizontal'
+    ? css `
+          height: ${sizeValues[$size]};
+          width: 100%;
+        `
+    : css `
+          width: ${sizeValues[$size]};
+          height: 100%;
+        `}
+  
+  /* Variant styles */
+  ${({ $variant, $color }) => {
+    const colorValue = colorValues[$color];
+    switch ($variant) {
+        case 'solid':
+            return css `
+          background-color: ${colorValue};
+        `;
+        case 'dashed':
+            return css `
+          background-image: repeating-linear-gradient(
+            90deg,
+            ${colorValue},
+            ${colorValue} 8px,
+            transparent 8px,
+            transparent 16px
+          );
+        `;
+        case 'dotted':
+            return css `
+          background-image: repeating-linear-gradient(
+            90deg,
+            ${colorValue},
+            ${colorValue} 4px,
+            transparent 4px,
+            transparent 12px
+          );
+        `;
+        case 'gradient':
+            return css `
+          background: linear-gradient(
+            90deg,
+            transparent 0%,
+            ${colorValue} 20%,
+            ${colorValue} 80%,
+            transparent 100%
+          );
+        `;
+        default:
+            return css `
+          background-color: ${colorValue};
+        `;
+    }
+}}
+`;
+export const DividerLabel = styled.span `
+  padding: 0 ${tokens.spacing150 || '0.75rem'};
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${({ $color }) => $color === 'dark' ? '#9ca3af' : tokens.onSurface ? `${tokens.onSurface}80` : '#6c757d'};
+  white-space: nowrap;
+  flex-shrink: 0;
+`;

package/lib/src/core-components/src/components/Divider/index.d.ts

@@ -0,0 +1,3 @@
+export { Divider } from './Divider';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/components/Divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,cAAc,SAAS,CAAC"}

package/lib/src/core-components/src/components/Divider/index.js

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export * from './types';

package/lib/src/core-components/src/components/Divider/types.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export declare const DIVIDER_ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type DividerOrientation = (typeof DIVIDER_ORIENTATIONS)[number];
+export declare const DIVIDER_VARIANTS: readonly ["solid", "dashed", "dotted", "gradient"];
+export type DividerVariant = (typeof DIVIDER_VARIANTS)[number];
+export declare const DIVIDER_SIZES: readonly ["thin", "medium", "thick"];
+export type DividerSize = (typeof DIVIDER_SIZES)[number];
+export declare const DIVIDER_COLORS: readonly ["default", "primary", "subtle", "dark"];
+export type DividerColor = (typeof DIVIDER_COLORS)[number];
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Orientation of the divider */
+    orientation?: DividerOrientation;
+    /** Visual variant */
+    variant?: DividerVariant;
+    /** Thickness of the divider */
+    size?: DividerSize;
+    /** Color scheme */
+    color?: DividerColor;
+    /** Inset from edges */
+    inset?: string;
+    /** Center the inset (from both sides) */
+    centerInset?: boolean;
+    /** Label text in the middle */
+    label?: string;
+    /** Label position */
+    labelPosition?: 'start' | 'center' | 'end';
+    /** Additional class name */
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/src/core-components/src/components/Divider/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Divider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,oBAAoB,qCAAsC,CAAC;AACxE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvE,eAAO,MAAM,gBAAgB,oDAAqD,CAAC;AACnF,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,eAAO,MAAM,aAAa,sCAAuC,CAAC;AAClE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,eAAO,MAAM,cAAc,mDAAoD,CAAC;AAChF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,iCAAiC;IACjC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,qBAAqB;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC3C,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/lib/src/core-components/src/components/Divider/types.js

@@ -0,0 +1,4 @@
+export const DIVIDER_ORIENTATIONS = ['horizontal', 'vertical'];
+export const DIVIDER_VARIANTS = ['solid', 'dashed', 'dotted', 'gradient'];
+export const DIVIDER_SIZES = ['thin', 'medium', 'thick'];
+export const DIVIDER_COLORS = ['default', 'primary', 'subtle', 'dark'];

package/lib/src/core-components/src/components/DynamicGrid/DynamicGrid.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DynamicGridProps, GridItemProps, GridContextValue } from './types';
+export declare const useGridContext: () => GridContextValue | null;
+export declare const DynamicGrid: React.ForwardRefExoticComponent<DynamicGridProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DynamicGridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DynamicGrid.d.ts.map

package/lib/src/core-components/src/components/DynamicGrid/DynamicGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicGrid.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/DynamicGrid/DynamicGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KASN,MAAM,OAAO,CAAC;AAaf,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAEjB,MAAM,SAAS,CAAC;AAejB,eAAO,MAAM,cAAc,+BAAgC,CAAC;AA8D5D,eAAO,MAAM,WAAW,yFAyRvB,CAAC;AAGF,eAAO,MAAM,eAAe,sFAiC3B,CAAC"}