@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/form/FormTreeSelect.svelte

@@ -1,85 +0,0 @@
-<!--
-  Form.TreeSelect — convenience wrapper: <Form.Field> + <TreeSelect> bound to a field.
--->
-<script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
-  import type { ComponentProps } from 'svelte';
-  import Field from './Field.svelte';
-  import TreeSelect from '../tree-select/TreeSelect.svelte';
-
-  type TreeSelectProps = ComponentProps<typeof TreeSelect>;
-
-  interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    initValue?: unknown;
-    required?: boolean;
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    span?: number;
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
-    dependencies?: string[];
-    trigger?: ValidateTrigger | ValidateTrigger[];
-    // TreeSelect-specific props
-    treeData?: TreeSelectProps['treeData'];
-    multiple?: TreeSelectProps['multiple'];
-    placeholder?: TreeSelectProps['placeholder'];
-    disabled?: boolean;
-    clearable?: TreeSelectProps['clearable'];
-    size?: TreeSelectProps['size'];
-    maxTagCount?: TreeSelectProps['maxTagCount'];
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    treeData,
-    multiple,
-    placeholder,
-    disabled,
-    clearable,
-    size,
-    maxTagCount,
-  }: Props = $props();
-
-  const fieldProps = $derived<ComponentProps<typeof Field>>({
-    field,
-    rules,
-    required,
-    ...(label !== undefined ? { label } : {}),
-    ...(initValue !== undefined ? { initValue } : {}),
-    ...(validateStatus !== undefined ? { validateStatus } : {}),
-    ...(extraText !== undefined ? { extraText } : {}),
-    ...(span !== undefined ? { span } : {}),
-    ...(transform !== undefined ? { transform } : {}),
-    ...(dependencies !== undefined ? { dependencies } : {}),
-    ...(trigger !== undefined ? { trigger } : {}),
-  });
-</script>
-
-<Field {...fieldProps}>
-  {#snippet children({ value, onChange, status, disabled: fieldDisabled })}
-    <TreeSelect
-      value={value as TreeSelectProps['value']}
-      {treeData}
-      {multiple}
-      {placeholder}
-      disabled={disabled ?? fieldDisabled}
-      {clearable}
-      {size}
-      {maxTagCount}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(v) => onChange(v)}
-    />
-  {/snippet}
-</Field>

package/src/form/FormUpload.svelte

@@ -1,92 +0,0 @@
-<!--
-  Form.Upload — convenience wrapper: <Form.Field> + <Upload> bound to a field.
--->
-<script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
-  import type { ComponentProps, Snippet } from 'svelte';
-  import Field from './Field.svelte';
-  import Upload from '../upload/Upload.svelte';
-
-  type UploadProps = ComponentProps<typeof Upload>;
-
-  interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    initValue?: unknown;
-    required?: boolean;
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    span?: number;
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
-    dependencies?: string[];
-    trigger?: ValidateTrigger | ValidateTrigger[];
-    // Upload-specific props
-    accept?: UploadProps['accept'];
-    multiple?: UploadProps['multiple'];
-    limit?: UploadProps['limit'];
-    disabled?: boolean;
-    listType?: UploadProps['listType'];
-    drag?: UploadProps['drag'];
-    action?: UploadProps['action'];
-    size?: UploadProps['size'];
-    children?: Snippet;
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    accept,
-    multiple,
-    limit,
-    disabled,
-    listType,
-    drag,
-    action,
-    size,
-    children,
-  }: Props = $props();
-
-  const fieldProps = $derived<ComponentProps<typeof Field>>({
-    field,
-    rules,
-    required,
-    ...(label !== undefined ? { label } : {}),
-    ...(initValue !== undefined ? { initValue } : {}),
-    ...(validateStatus !== undefined ? { validateStatus } : {}),
-    ...(extraText !== undefined ? { extraText } : {}),
-    ...(span !== undefined ? { span } : {}),
-    ...(transform !== undefined ? { transform } : {}),
-    ...(dependencies !== undefined ? { dependencies } : {}),
-    ...(trigger !== undefined ? { trigger } : {}),
-  });
-</script>
-
-<Field {...fieldProps}>
-  {#snippet children({ value, onChange, status, disabled: fieldDisabled })}
-    <Upload
-      value={Array.isArray(value) ? (value as UploadProps['value']) : undefined}
-      {accept}
-      {multiple}
-      {limit}
-      disabled={disabled ?? fieldDisabled}
-      {listType}
-      {drag}
-      {action}
-      {size}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(list) => onChange(list)}
-    >
-      {@render children?.()}
-    </Upload>
-  {/snippet}
-</Field>

package/src/form/context.ts

@@ -1,47 +0,0 @@
-import { getContext, setContext } from 'svelte';
-import type { FormApi, FormState } from '@chenzy-design/core';
-
-export type FormLayout = 'vertical' | 'horizontal';
-export type FormLabelPosition = 'top' | 'left' | 'inset';
-export type FormSize = 'small' | 'default' | 'large';
-export type FormLabelAlign = 'left' | 'right';
-
-export interface GridCol {
-  span?: number;
-  offset?: number;
-}
-
-export interface FormContext {
-  /** the headless form instance from @chenzy-design/core */
-  form: FormApi;
-  /** getter keeps the bridged $state reactive across context boundary */
-  getFormState: () => FormState;
-  // getters keep the shared config reactive to Form prop changes across the
-  // context boundary (reading a plain value would freeze the initial snapshot).
-  getLabelPosition: () => FormLabelPosition;
-  getLabelWidth: () => number | string | undefined;
-  /** Label text alignment (spec §4 L60). */
-  getLabelAlign: () => FormLabelAlign;
-  getSize: () => FormSize;
-  getDisabled: () => boolean;
-  getRequiredMark: () => boolean;
-  getColon: () => boolean;
-  /** whether error/warning text carries a status icon (spec §4 L66). */
-  getShowValidateIcon: () => boolean;
-  /** extra text position: 'middle' | 'bottom' (default 'bottom'). */
-  getExtraTextPosition: () => 'middle' | 'bottom';
-  /** 控件布局列配置（Grid 布局时）。 */
-  getWrapperCol: () => GridCol | undefined;
-  /** 标签布局列配置（Grid 布局时）。 */
-  getLabelCol: () => GridCol | undefined;
-}
-
-const KEY = Symbol('cd-form');
-
-export function setFormContext(ctx: FormContext): void {
-  setContext(KEY, ctx);
-}
-
-export function getFormContext(): FormContext | undefined {
-  return getContext<FormContext | undefined>(KEY);
-}

package/src/form/index.ts

@@ -1,22 +0,0 @@
-import Form_ from './Form.svelte';
-import Field from './Field.svelte';
-import FormInput from './FormInput.svelte';
-import FieldArray from './FieldArray.svelte';
-
-export const Form: typeof Form_ & {
-  Field: typeof Field;
-  Input: typeof FormInput;
-  List: typeof FieldArray;
-} = Object.assign(Form_, { Field, Input: FormInput, List: FieldArray });
-
-export { Field as FormField, FormInput, FieldArray };
-export { meta as formMeta } from './meta.js';
-export {
-  getFormContext,
-  setFormContext,
-  type FormContext,
-  type FormLayout,
-  type FormLabelPosition,
-  type FormSize,
-  type FormLabelAlign,
-} from './context.js';

package/src/form/meta.ts

@@ -1,85 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Form',
-  category: 'input',
-  description: '表单容器，桥接 headless createForm，提供字段注册、校验、布局与 a11y。',
-  subComponents: ['Form.Field', 'Form.Input'],
-  props: [
-    { name: 'value', type: 'Record<string, unknown>', default: 'undefined', desc: '受控整表单值；变更经 onChange 上报' },
-    { name: 'initValues', type: 'Record<string, unknown>', default: '{}', desc: '非受控初始值' },
-    { name: 'layout', type: "'vertical'|'horizontal'", default: 'vertical' },
-    { name: 'labelPosition', type: "'top'|'left'|'inset'", default: 'top' },
-    { name: 'labelWidth', type: 'number | string', default: 'undefined' },
-    { name: 'labelAlign', type: "'left'|'right'", default: 'left', desc: 'Label 文本对齐（spec §4）' },
-    { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-    { name: 'disabled', type: 'boolean', default: 'false' },
-    { name: 'requiredMark', type: 'boolean', default: 'true' },
-    { name: 'colon', type: 'boolean', default: 'false' },
-    { name: 'scrollToError', type: 'boolean', default: 'false', desc: '提交校验失败时滚动并聚焦首个错误字段' },
-    { name: 'validateTrigger', type: "'change'|'blur'|'submit'|'mount'|string[]", default: "['blur','change']", desc: '全局默认校验时机，字段可经 trigger 覆盖（spec §4）' },
-    { name: 'showValidateIcon', type: 'boolean', default: 'true', desc: '错误/警告文案是否带状态图标（spec §4）' },
-    { name: 'stopValidateWithError', type: 'boolean', default: 'false', desc: '字段命中首条错误即停止该字段后续 rule（spec §4）' },
-    { name: 'preventDefault', type: 'boolean', default: 'true', desc: '是否拦截原生 submit 默认行为（spec §4）' },
-    { name: 'allowEmpty', type: 'boolean', default: 'false', desc: '收集值时是否保留空值字段键（spec §4）' },
-    { name: 'onSubmit', type: '(r: { valid; values; errors }) => void', default: 'undefined' },
-    { name: 'onChange', type: '(values: Record<string, unknown>) => void', default: 'undefined' },
-    { name: 'children', type: 'Snippet', default: 'undefined' },
-    { name: 'footer', type: 'Snippet<[{ submitting: boolean }]>', default: 'undefined' },
-    // Form.Field
-    { name: 'Field.field', type: 'string', default: '—', desc: '字段名（必填）' },
-    { name: 'Field.label', type: 'string', default: 'undefined' },
-    { name: 'Field.rules', type: 'Rule[]', default: '[]' },
-    { name: 'Field.initValue', type: 'unknown', default: 'undefined', desc: '字段级初始值，覆盖容器 initValues（spec §4.2）' },
-    { name: 'Field.required', type: 'boolean', default: 'false' },
-    { name: 'Field.validateStatus', type: "'default'|'warning'|'error'", default: 'undefined', desc: '外部强制校验态（受控展示，不经内部校验、不回写）（spec §4.2）' },
-    { name: 'Field.extraText', type: 'string', default: 'undefined' },
-    { name: 'Field.noStyle', type: 'boolean', default: 'false', desc: '仅注册收集、不渲染布局 DOM（纯收集）（spec §4.2 §190）' },
-    { name: 'Field.span', type: 'number', default: 'undefined', desc: 'Form.Section 栅格内占列（grid-column: span N）（spec §4.2）' },
-    { name: 'Field.transform', type: '(v, values) => unknown', default: 'undefined', desc: '提交前值转换（纯函数，不回写 state）（spec §4.2）' },
-    { name: 'Field.dependencies', type: 'string[]', default: 'undefined', desc: '依赖字段名；其值变化时本字段自动重校验' },
-    { name: 'Field.trigger', type: "'change'|'blur'|'submit'|'mount'|string[]", default: '继承容器', desc: '字段级校验时机覆盖（spec §4）' },
-    { name: 'Field.valuePropName', type: 'string', default: "'value'", desc: "控件值属性名；如 Checkbox/Switch 用 'checked'，snippet 参数即多出同名别名映射字段值" },
-    { name: 'Field.children', type: 'Snippet<[{ value; [valuePropName]; onChange; onBlur; status; id; describedBy; disabled }]>', default: 'undefined', desc: 'snippet 参数含通用 value 及按 valuePropName 命名的别名（默认 value）；id 用于 label for/id 关联，describedBy 用于控件 aria-describedby' },
-    // Form.Input
-    { name: 'Input.field', type: 'string', default: '—', desc: '字段名（必填）' },
-    { name: 'Input.label', type: 'string', default: 'undefined' },
-    { name: 'Input.rules', type: 'Rule[]', default: '[]' },
-    { name: 'Input.initValue', type: 'unknown', default: 'undefined', desc: '字段级初始值，覆盖容器 initValues（spec §4.2）' },
-    { name: 'Input.required', type: 'boolean', default: 'false' },
-    { name: 'Input.validateStatus', type: "'default'|'warning'|'error'", default: 'undefined', desc: '外部强制校验态（受控展示）（spec §4.2）' },
-    { name: 'Input.extraText', type: 'string', default: 'undefined' },
-    { name: 'Input.span', type: 'number', default: 'undefined', desc: 'Form.Section 栅格内占列（spec §4.2）' },
-    { name: 'Input.transform', type: '(v, values) => unknown', default: 'undefined', desc: '提交前值转换（纯函数）（spec §4.2）' },
-    { name: 'Input.placeholder', type: 'string', default: 'undefined' },
-    { name: 'Input.type', type: "'text'|'password'", default: 'text' },
-    { name: 'Input.clearable', type: 'boolean', default: 'false' },
-    { name: 'Input.maxLength', type: 'number', default: 'undefined' },
-    { name: 'Input.dependencies', type: 'string[]', default: 'undefined', desc: '依赖字段名；其值变化时本字段自动重校验' },
-    { name: 'Input.trigger', type: "'change'|'blur'|'submit'|'mount'|string[]", default: '继承容器', desc: '字段级校验时机覆盖（spec §4）' },
-  ],
-  a11y: {
-    role: 'form',
-    notes: [
-      '原生 <form>，submit 经 preventDefault 接管',
-      '字段错误用 role=alert，经 aria-describedby 关联控件',
-      'extraText 无错误时经 aria-describedby 关联',
-      '必填星标 aria-hidden，必填语义由校验承载',
-      'Form.Input 经 Field 自动生成的 id 用 label for/id 精确关联控件（点击 label 聚焦 input）；id 也可由 Input 外部传入',
-    ],
-  },
-  tokens: [
-    '--cd-form-item-gap',
-    '--cd-form-label-color',
-    '--cd-form-label-gap',
-    '--cd-form-required-color',
-    '--cd-form-optional-color',
-    '--cd-form-extra-color',
-    '--cd-form-error-color',
-    '--cd-form-error-font-size',
-    '--cd-spacing-*',
-    '--cd-color-*',
-  ],
-} as const;

package/src/grid/Col.svelte

@@ -1,142 +0,0 @@
-<!--
-  Col — child of Row in the 24-column grid.
-  Reads Row's gutter via context for matching horizontal padding.
-  响应式断点 props xs/sm/md/lg/xl/xxl：值为 number(span) 或
-  { span, offset, order, push, pull, flex }，按当前视口断点降级解析后覆盖基础 props。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { getContext } from 'svelte';
-  import { resolveResponsiveValue, type Breakpoint } from '@chenzy-design/core';
-  import { ROW_CONTEXT_KEY, type RowContext } from './Row.svelte';
-  import { useBreakpoint } from './use-breakpoint.svelte.js';
-
-  const COLUMNS = 24;
-
-  type ColConfig = {
-    span?: number;
-    offset?: number;
-    order?: number;
-    push?: number;
-    pull?: number;
-    flex?: string | number;
-  };
-  type ColResponsive = number | ColConfig;
-
-  interface Props {
-    /** 0-24; 0 hides the column */
-    span?: number;
-    offset?: number;
-    order?: number;
-    push?: number;
-    pull?: number;
-    /** when set, takes precedence over `span` (the column uses raw flex) */
-    flex?: string | number;
-    xs?: ColResponsive;
-    sm?: ColResponsive;
-    md?: ColResponsive;
-    lg?: ColResponsive;
-    xl?: ColResponsive;
-    xxl?: ColResponsive;
-    class?: string;
-    children?: Snippet;
-  }
-
-  let {
-    span,
-    offset = 0,
-    order = 0,
-    push = 0,
-    pull = 0,
-    flex,
-    xs,
-    sm,
-    md,
-    lg,
-    xl,
-    xxl,
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  // Touch context so Col stays coupled to Row (padding comes from inherited var).
-  getContext<RowContext>(ROW_CONTEXT_KEY);
-
-  const bp = useBreakpoint();
-
-  // 当前断点解析出的响应式覆盖（降级取值），叠加到基础 props 上。
-  const resolved = $derived.by(() => {
-    const byBp: Record<Breakpoint, ColResponsive | undefined> = { xs, sm, md, lg, xl, xxl };
-    const r = resolveResponsiveValue<ColResponsive | undefined>(byBp, bp.current, undefined);
-    const rc: ColConfig = r === undefined ? {} : typeof r === 'number' ? { span: r } : r;
-    return {
-      span: rc.span ?? span,
-      offset: rc.offset ?? offset,
-      order: rc.order ?? order,
-      push: rc.push ?? push,
-      pull: rc.pull ?? pull,
-      flex: rc.flex ?? flex,
-    };
-  });
-
-  function pct(units: number): string {
-    return `${(units / COLUMNS) * 100}%`;
-  }
-
-  const hidden = $derived(resolved.span === 0);
-
-  const sizeStyle = $derived.by(() => {
-    const rSpan = resolved.span;
-    const rFlex = resolved.flex;
-    if (rFlex !== undefined) {
-      // flex takes precedence over span (span is ignored when flex is set).
-      const value = typeof rFlex === 'number' ? `${rFlex} ${rFlex} auto` : rFlex;
-      return [`flex:${value}`];
-    }
-    if (rSpan !== undefined && rSpan > 0) {
-      return [`flex:0 0 ${pct(rSpan)}`, `max-width:${pct(rSpan)}`];
-    }
-    // auto column: grow/shrink naturally.
-    return ['flex:1 1 0'];
-  });
-
-  const rOffset = $derived(resolved.offset ?? 0);
-  const rOrder = $derived(resolved.order ?? 0);
-  const rPush = $derived(resolved.push ?? 0);
-  const rPull = $derived(resolved.pull ?? 0);
-
-  const inlineStyle = $derived(
-    [
-      ...sizeStyle,
-      rOffset > 0 && `margin-inline-start:${pct(rOffset)}`,
-      rOrder !== 0 && `order:${rOrder}`,
-      rPush > 0 && `inset-inline-start:${pct(rPush)}`,
-      rPull > 0 && `inset-inline-end:${pct(rPull)}`,
-    ]
-      .filter(Boolean)
-      .join(';'),
-  );
-
-  const relative = $derived(rPush > 0 || rPull > 0);
-
-  const cls = $derived(['cd-col', relative && 'cd-col--relative', className].filter(Boolean).join(' '));
-</script>
-
-{#if !hidden}
-  <div class={cls} style={inlineStyle}>
-    {@render children?.()}
-  </div>
-{/if}
-
-<style>
-  .cd-col {
-    min-width: 0;
-    /* border-box so the gutter padding is included in the flex-basis %,
-       otherwise 4×span-6 (=24) overflows 100% and wraps to a new line. */
-    box-sizing: border-box;
-    padding-inline: calc(var(--cd-grid-gutter-x) / 2);
-  }
-  .cd-col--relative {
-    position: relative;
-  }
-</style>

package/src/grid/Grid.a11y.test.ts

@@ -1,14 +0,0 @@
-// Grid a11y：Row + Col 24 栅格。纯布局容器，不引入语义角色。
-// 仅断言 axe 0 violations（无特殊 ARIA）。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import GridFixture from './GridA11yFixture.svelte';
-
-describe('Grid a11y', () => {
-  it('Row + Col：纯布局无语义角色，无 axe violations', async () => {
-    const { container } = renderWithLocale(GridFixture, {});
-    expect(container.querySelector('.cd-row')).not.toBeNull();
-    expect(container.querySelectorAll('.cd-col').length).toBe(2);
-    await expectNoAxeViolations(container);
-  });
-});

package/src/grid/GridA11yFixture.svelte

@@ -1,12 +0,0 @@
-<!--
-  仅供 Grid.a11y.test.ts 使用的测试夹具：Row + Col 24 栅格。
-  纯布局容器，不引入语义角色；本套件只断言 axe 0 violations。
--->
-<script lang="ts">
-  import { Row, Col } from './index.js';
-</script>
-
-<Row gutter={16}>
-  <Col span={12}>Left column</Col>
-  <Col span={12}>Right column</Col>
-</Row>

package/src/grid/Row.svelte

@@ -1,116 +0,0 @@
-<!--
-  Row — 24-column flex grid container. Pairs with Col.
-  Token-driven gutter via negative-margin technique. No hardcoded colors.
-  响应式 gutter：支持按断点对象 { xs, sm, md, lg, xl, xxl }，每档值可为
-  number 或 [x, y]，按当前视口断点降级解析（mobile-first）。
--->
-<script lang="ts" module>
-  export const ROW_CONTEXT_KEY = Symbol('cd-row');
-
-  export interface RowContext {
-    getGutterX: () => number;
-  }
-</script>
-
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { setContext } from 'svelte';
-  import { resolveResponsiveValue, type Breakpoint } from '@chenzy-design/core';
-  import { useBreakpoint } from './use-breakpoint.svelte.js';
-
-  type RowAlign = 'top' | 'middle' | 'bottom' | 'baseline' | 'stretch';
-  type RowJustify = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-  type GutterValue = number | [number, number];
-  type ResponsiveGutter = Partial<Record<Breakpoint, GutterValue>>;
-
-  interface Props {
-    gutter?: GutterValue | ResponsiveGutter;
-    align?: RowAlign;
-    justify?: RowJustify;
-    wrap?: boolean;
-    class?: string;
-    children?: Snippet;
-  }
-
-  let {
-    gutter = 0,
-    align = 'top',
-    justify = 'start',
-    wrap = true,
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const bp = useBreakpoint();
-
-  function toPair(v: GutterValue): [number, number] {
-    return Array.isArray(v) ? [v[0], v[1]] : [v, 0];
-  }
-
-  const gutters = $derived.by<[number, number]>(() => {
-    if (typeof gutter === 'number' || Array.isArray(gutter)) return toPair(gutter);
-    // responsive object: resolve by current breakpoint (mobile-first cascade).
-    const resolved = resolveResponsiveValue<GutterValue>(gutter, bp.current, 0);
-    return toPair(resolved);
-  });
-
-  const gutterX = $derived(gutters[0]);
-  const gutterY = $derived(gutters[1]);
-
-  // Col reads this to apply matching horizontal padding.
-  setContext<RowContext>(ROW_CONTEXT_KEY, { getGutterX: () => gutterX });
-
-  const alignItems = $derived.by(() => {
-    switch (align) {
-      case 'middle':
-        return 'center';
-      case 'bottom':
-        return 'flex-end';
-      case 'baseline':
-        return 'baseline';
-      case 'stretch':
-        return 'stretch';
-      default:
-        return 'flex-start';
-    }
-  });
-
-  const justifyContent = $derived.by(() => {
-    switch (justify) {
-      case 'start':
-        return 'flex-start';
-      case 'end':
-        return 'flex-end';
-      case 'center':
-        return 'center';
-      default:
-        return justify;
-    }
-  });
-
-  const cls = $derived(['cd-row', className].filter(Boolean).join(' '));
-
-  const inlineStyle = $derived(
-    [
-      `--cd-grid-gutter-x:${gutterX}px`,
-      `--cd-grid-gutter-y:${gutterY}px`,
-      `align-items:${alignItems}`,
-      `justify-content:${justifyContent}`,
-      `flex-wrap:${wrap ? 'wrap' : 'nowrap'}`,
-    ].join(';'),
-  );
-</script>
-
-<div class={cls} style={inlineStyle}>
-  {@render children?.()}
-</div>
-
-<style>
-  .cd-row {
-    display: flex;
-    flex-flow: row wrap;
-    min-width: 0;
-    margin-inline: calc(var(--cd-grid-gutter-x) / -2);
-    row-gap: var(--cd-grid-gutter-y);
-  }
-</style>

package/src/grid/index.ts

@@ -1,3 +0,0 @@
-export { default as Row } from './Row.svelte';
-export { default as Col } from './Col.svelte';
-export { meta as gridMeta } from './meta.js';