@ceed/cds 1.24.1-next.2 → 1.24.1-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/cds",
-  "version": "1.24.1-next.2",
+  "version": "1.24.1-next.3",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,12 +11,9 @@
     "storybook": "storybook dev -p 6006",
     "test-storybook": "vitest --project=storybook",
     "build-storybook": "storybook build --webpack-stats-json",
-    "build": "yarn build-for-framer && rm -rf ./dist && tsc --emitDeclarationOnly -p tsconfig.build.json && yarn build:esm && yarn build:cjs && yarn build:browser:prod && yarn generate:dist-llms",
-    "test:build": "vitest run --project=build-validation",
-    "build:esm": "node esbuild.esm.mjs",
-    "build:cjs": "node esbuild.cjs.mjs",
-    "build:browser": "node esbuild.browser.mjs",
-    "build:browser:prod": "NODE_ENV=production node esbuild.browser.mjs",
+    "build": "yarn build-for-framer && rm -rf ./dist && tsc --emitDeclarationOnly -p tsconfig.build.json && yarn build:esm && yarn build:cjs && yarn generate:dist-llms",
+    "build:esm": "yarn esbuild src/index.ts --bundle --outfile='dist/index.js' --format=esm '--packages=external' --tsconfig=tsconfig.build.json",
+    "build:cjs": "yarn esbuild src/index.ts --bundle --outfile='dist/index.cjs' --format=cjs '--packages=external' --tsconfig=tsconfig.build.json",
     "build-for-framer": "yarn esbuild src/framer-entrypoint.ts --bundle --outfile='framer/index.js' --format=esm '--external:react' '--external:react/jsx-runtime' '--external:react-dom' '--external:framer' '--external:framer-motion' --main-fields=module,main --target=chrome58 --minify",
     "prepack": "yarn build",
     "lint": "oxlint && eslint \"./src/**/*.{ts,tsx}\"",
@@ -31,32 +28,25 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    },
-    "./browser": {
-      "import": "./dist/index.browser.js"
     }
   },
   "author": "Ecube Labs",
   "sideEffects": false,
   "license": "MIT",
   "peerDependencies": {
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "^6.1.0",
-    "@mui/joy": ">=5.0.0-beta.32 <6.0.0-0",
-    "framer-motion": "^11.0.3",
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@mui/icons-material": {
-      "optional": true
-    }
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-    "@babel/runtime": "^7.23.9",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/base": "5.0.0-beta.40",
+    "@mui/icons-material": "^6.1.0",
+    "@mui/joy": "^5.0.0-beta.32",
     "@tanstack/react-virtual": "^3.4.0",
+    "framer-motion": "^11.0.3",
+    "intl-messageformat": "^10.0.0",
     "react-imask": "^7.5.0",
     "react-markdown": "^9.0.1",
     "react-number-format": "^5.0.0",
@@ -64,27 +54,28 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
+    "@chromatic-com/storybook": "^4.0.1",
     "@ecubelabs/prettier-config": "^0.0.8",
     "@ecubelabs/tsconfig": "^1.0.0",
     "@mui/material": "^5.15.10",
     "@prettier/plugin-oxc": "^0.0.4",
-    "@storybook/addon-a11y": "^10.2.19",
-    "@storybook/addon-docs": "^10.2.19",
-    "@storybook/addon-links": "^10.2.19",
-    "@storybook/addon-vitest": "^10.2.19",
-    "@storybook/react-vite": "^10.2.19",
+    "@storybook/addon-a11y": "^9.0.18",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-links": "^9.0.18",
+    "@storybook/addon-vitest": "^9.0.18",
+    "@storybook/builder-vite": "^9.0.18",
+    "@storybook/react-vite": "^9.0.18",
     "@types/unist": "^3.0.2",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "esbuild": "^0.27.0",
+    "esbuild": "^0.25.0",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-oxlint": "^1.9.0",
     "eslint-plugin-prettier": "^5.5.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "10.2.19",
+    "eslint-plugin-storybook": "9.0.18",
     "framer": "^2.4.1",
     "oxlint": "^1.9.0",
     "playwright": "^1.54.1",
@@ -93,10 +84,10 @@
     "react-dom": "^18.2.0",
     "semantic-release": "^24.2.1",
     "semantic-release-yarn": "^3.0.2",
-    "storybook": "^10.2.19",
+    "storybook": "^9.0.18",
     "turbo": "^2.5.6",
     "typescript": "^5.3.3",
-    "vite": "^7.3.1",
+    "vite": "^7.1.11",
     "vitest": "^3.2.4"
   },
   "repository": {

package/README.md

@@ -1,51 +0,0 @@
-# @ceed/cds
-
-Client Design System - A React component library for Ecube Labs client applications.
-
-## Installation
-
-```bash
-npm install @ceed/cds
-# or
-yarn add @ceed/cds
-```
-
-### Peer Dependencies
-
-`@ceed/cds` requires the following peer dependencies to be installed in your app.
-You can skip any packages that are already installed.
-
-```bash
-npm install @emotion/react @emotion/styled @mui/joy framer-motion
-# If using icon components:
-npm install @mui/icons-material
-```
-
-| Package | Required | Note |
-|---|---|---|
-| `@emotion/react` | Yes | MUI Joy rendering engine |
-| `@emotion/styled` | Yes | MUI Joy styling engine |
-| `@mui/joy` | Yes | Design system foundation (includes ThemeProvider) |
-| `framer-motion` | Yes | Animation components |
-| `@mui/icons-material` | Optional | Only needed for icon-based components |
-
-## Usage
-
-### With Bundler (Vite, Webpack, etc.)
-
-```tsx
-import { Button, ThemeProvider } from '@ceed/cds';
-
-function App() {
-  return (
-    <ThemeProvider>
-      <Button variant="solid">Click me</Button>
-    </ThemeProvider>
-  );
-}
-```
-
-## Documentation
-
-- [Storybook](https://main--66da7aaaf87fb0b864d6afca.chromatic.com)
-- [Confluence](https://ecubelabs.atlassian.net/wiki/spaces/HP/pages/3256123430/Design+System)

package/dist/chunks/rehype-accent-FZRUD7VI.js

@@ -1,39 +0,0 @@
-// src/libs/rehype-accent/index.ts
-import { visit } from "unist-util-visit";
-function rehypeAccent(options) {
-  const { accentColor } = options;
-  return (tree) => {
-    visit(tree, "text", (node, index, parent) => {
-      const value = node.value;
-      const regex = /\|\|.*?\|\|/g;
-      let match;
-      let lastIndex = 0;
-      const newNodes = [];
-      while ((match = regex.exec(value)) !== null) {
-        if (match.index > lastIndex) {
-          newNodes.push({
-            type: "text",
-            value: value.slice(lastIndex, match.index)
-          });
-        }
-        const innerText = match[0].split("||")[1];
-        newNodes.push({
-          type: "element",
-          tagName: "span",
-          properties: { textColor: accentColor },
-          children: [{ type: "text", value: innerText }]
-        });
-        lastIndex = match.index + match[0].length;
-      }
-      if (lastIndex < value.length) {
-        newNodes.push({ type: "text", value: value.slice(lastIndex) });
-      }
-      if (newNodes.length) {
-        parent.children.splice(index, 1, ...newNodes);
-      }
-    });
-  };
-}
-export {
-  rehypeAccent
-};

package/dist/components/RadioTileGroup/RadioTileGroup.d.ts

@@ -1,56 +0,0 @@
-import React, { ReactNode } from 'react';
-import type { SxProps } from '@mui/joy/styles/types';
-export interface RadioTileOption<T = string> {
-    value: T;
-    label: ReactNode;
-    disabled?: boolean;
-    startDecorator?: ReactNode;
-}
-export interface RadioTileGroupProps<T = string> {
-    /**
-     * @default 'sm'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    options: RadioTileOption<T>[];
-    value?: T;
-    defaultValue?: T;
-    name?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    sx?: SxProps;
-    disabled?: boolean;
-    className?: string;
-    useIndicator?: boolean;
-    flex?: boolean;
-    /**
-     * 지정하지 않으면 한 row에 모든 옵션이 렌더링된다.
-     * - 특정 rows 이내로 렌더링 하고 싶으면 `columns: Math.ceil(options.length / 원하는 rows)`로 설정할 수 있다.
-     * - 수직으로 렌더링 하고 싶으면 `columns: 1`로 설정할 수 있다.
-     * - `flex` 옵션과 함께 사용할수 있다.
-     */
-    columns?: number;
-    /**
-     * @default 'center'
-     */
-    textAlign?: 'start' | 'center';
-    /**
-     * Label for the RadioTileGroup
-     */
-    label?: React.ReactNode;
-    /**
-     * Helper text for the RadioTileGroup
-     */
-    helperText?: React.ReactNode;
-    /**
-     * Whether the RadioTileGroup has an error
-     */
-    error?: boolean;
-    /**
-     * Whether the RadioTileGroup is required
-     */
-    required?: boolean;
-}
-declare function RadioTileGroup<T extends string | number = string>(props: RadioTileGroupProps<T>): React.JSX.Element;
-declare namespace RadioTileGroup {
-    var displayName: string;
-}
-export { RadioTileGroup };

package/dist/components/RadioTileGroup/index.d.ts

@@ -1,3 +0,0 @@
-import { RadioTileGroup } from './RadioTileGroup';
-export * from './RadioTileGroup';
-export default RadioTileGroup;

package/dist/components/feedback/CircularProgress.md

@@ -1,257 +0,0 @@
-# CircularProgress
-
-## Introduction
-
-The CircularProgress component displays a circular loading indicator. It is based on Joy UI's CircularProgress and supports both indeterminate (spinning) and determinate (progress percentage) modes. Use it to provide visual feedback during asynchronous operations like data fetching, file uploads, or form submissions.
-
-```tsx
-<CircularProgress />
-```
-
-| Field       | Description | Default |
-| ----------- | ----------- | ------- |
-| size        | —           | —       |
-| color       | —           | —       |
-| variant     | —           | —       |
-| value       | —           | —       |
-| determinate | —           | —       |
-| thickness   | —           | —       |
-
-## Usage
-
-```tsx
-import { CircularProgress } from '@ceed/cds';
-
-function MyComponent() {
-  return <CircularProgress />;
-}
-```
-
-## Sizes
-
-CircularProgress supports three sizes: `sm`, `md` (default), and `lg`.
-
-```tsx
-<>
-  <CircularProgress size="sm" />
-  <CircularProgress size="md" />
-  <CircularProgress size="lg" />
-</>
-```
-
-```tsx
-<CircularProgress size="sm" />
-<CircularProgress size="md" />
-<CircularProgress size="lg" />
-```
-
-## Colors
-
-Five semantic colors are available via the `color` prop. The default is `primary`.
-
-```tsx
-<>
-  <CircularProgress color="primary" />
-  <CircularProgress color="neutral" />
-  <CircularProgress color="danger" />
-  <CircularProgress color="success" />
-  <CircularProgress color="warning" />
-</>
-```
-
-```tsx
-<CircularProgress color="primary" />
-<CircularProgress color="neutral" />
-<CircularProgress color="danger" />
-<CircularProgress color="success" />
-<CircularProgress color="warning" />
-```
-
-## Variants
-
-Four visual variants are supported: `solid`, `soft` (default), `outlined`, and `plain`.
-
-```tsx
-<>
-  <CircularProgress variant="solid" />
-  <CircularProgress variant="soft" />
-  <CircularProgress variant="outlined" />
-  <CircularProgress variant="plain" />
-</>
-```
-
-```tsx
-<CircularProgress variant="solid" />
-<CircularProgress variant="soft" />
-<CircularProgress variant="outlined" />
-<CircularProgress variant="plain" />
-```
-
-## Determinate Mode
-
-Set `determinate` to `true` and provide a `value` (0–100) to display specific progress.
-
-```tsx
-<>
-  <CircularProgress determinate value={25} />
-  <CircularProgress determinate value={50} />
-  <CircularProgress determinate value={75} />
-  <CircularProgress determinate value={100} />
-</>
-```
-
-```tsx
-<CircularProgress determinate value={25} />
-<CircularProgress determinate value={50} />
-<CircularProgress determinate value={75} />
-<CircularProgress determinate value={100} />
-```
-
-## With Label
-
-Pass children to display a label inside the progress ring. This is useful for showing the current percentage.
-
-```tsx
-<CircularProgress determinate value={66}>
-  <Typography level="body-xs">66%</Typography>
-</CircularProgress>
-```
-
-```tsx
-<CircularProgress determinate value={66}>
-  <Typography level="body-xs">66%</Typography>
-</CircularProgress>
-```
-
-## In Button
-
-Use CircularProgress inside a Button to indicate a loading state.
-
-```tsx
-<>
-  <Button startDecorator={<CircularProgress variant="solid" size="sm" />}>
-    Loading…
-  </Button>
-  <Button disabled>
-    <CircularProgress variant="soft" size="sm" />
-  </Button>
-</>
-```
-
-```tsx
-<Button startDecorator={<CircularProgress variant="solid" size="sm" />}>
-  Loading…
-</Button>
-
-<Button disabled>
-  <CircularProgress variant="soft" size="sm" />
-</Button>
-```
-
-## Thickness
-
-Control the stroke thickness of the progress ring with the `thickness` prop.
-
-```tsx
-<>
-  <CircularProgress thickness={2} />
-  <CircularProgress thickness={4} />
-  <CircularProgress thickness={8} />
-</>
-```
-
-```tsx
-<CircularProgress thickness={2} />
-<CircularProgress thickness={4} />
-<CircularProgress thickness={8} />
-```
-
-## Common Use Cases
-
-### Data Fetching Indicator
-
-```tsx
-function DataLoader() {
-  const [loading, setLoading] = React.useState(true);
-  const [data, setData] = React.useState(null);
-
-  React.useEffect(() => {
-    fetchData().then((result) => {
-      setData(result);
-      setLoading(false);
-    });
-  }, []);
-
-  if (loading) {
-    return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  return <DataView data={data} />;
-}
-```
-
-### File Upload Progress
-
-```tsx
-function FileUpload({ progress }: { progress: number }) {
-  return (
-    <Stack direction="row" alignItems="center" spacing={2}>
-      <CircularProgress determinate value={progress} size="lg">
-        <Typography level="body-xs">{progress}%</Typography>
-      </CircularProgress>
-      <Typography level="body-md">Uploading file…</Typography>
-    </Stack>
-  );
-}
-```
-
-### Inline Loading Button
-
-```tsx
-function SubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
-  return (
-    <Button
-      disabled={isSubmitting}
-      startDecorator={
-        isSubmitting ? <CircularProgress variant="solid" size="sm" /> : null
-      }
-    >
-      {isSubmitting ? 'Submitting…' : 'Submit'}
-    </Button>
-  );
-}
-```
-
-## Best Practices
-
-1. **Use indeterminate for unknown durations**: When you cannot estimate progress, use the default spinning mode. Switch to determinate only when you can track actual progress.
-
-```tsx
-// ✅ Unknown duration — indeterminate
-<CircularProgress />
-
-// ✅ Known progress — determinate
-<CircularProgress determinate value={uploadProgress} />
-
-// ❌ Don't use determinate with a static value for loading
-<CircularProgress determinate value={50} />
-```
-
-2. **Size appropriately**: Use `sm` for inline contexts (buttons, table cells), `md` for general use, and `lg` for prominent page-level loading states.
-
-3. **Match variant with context**: Use `solid` variant inside solid buttons, and `soft` (default) for standalone usage to maintain visual consistency.
-
-4. **Add descriptive text**: Always pair the indicator with text or an `aria-label` so users understand what is loading.
-
-5. **Avoid multiple spinners**: Show one loading indicator per distinct loading region. Multiple spinners on a page create visual clutter.
-
-## Accessibility
-
-- CircularProgress has `role="progressbar"` by default.
-- In determinate mode, `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` are set automatically.
-- Add `aria-label` or nearby descriptive text to explain what is loading (e.g., `aria-label="Loading user data"`).
-- Ensure sufficient color contrast between the progress ring and its background, especially with the `plain` variant.