@cssui/react 1.0.0 → 1.0.1

package/dist/components/form/style.css

@@ -0,0 +1,79 @@
+/**
+ * Form 表单组件样式
+ */
+
+.css-form {
+  display: grid;
+  gap: 20px;
+  width: 100%;
+}
+
+.css-form__item {
+  display: grid;
+  gap: 8px;
+}
+
+.css-form__control {
+  min-width: 0;
+}
+
+.css-form__control .css-input,
+.css-form__control .css-select {
+  width: 100%;
+  max-width: none;
+}
+
+.css-form__item-main {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.css-form__checkbox-group {
+  display: grid;
+  gap: 12px;
+}
+
+.css-form__radio-field {
+  display: grid;
+  gap: 4px;
+}
+
+.css-form .css-form__help,
+.css-form .css-form__error {
+  margin: 0;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.css-form .css-form__help {
+  color: var(--color-dark-03, #999999);
+}
+
+.css-form .css-form__error {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-error, #d74d45);
+}
+
+.css-form .css-form__error .css-icon {
+  flex: 0 0 auto;
+}
+
+.css-form__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+@media (max-width: 767px) {
+  .css-form__actions {
+    width: 100%;
+  }
+
+  .css-form__actions .css-button {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Grid 栅格组件 - 逻辑部分
+ */
+export declare const gridBreakpoints: readonly ["xs", "sm", "md", "lg", "xl"];
+export type GridBreakpoint = (typeof gridBreakpoints)[number];
+export type GridLength = number | string;
+export type GridSpan = number | 'full';
+export type GridResponsiveValue<T> = T | Partial<Record<GridBreakpoint, T>>;
+export interface GridProps {
+    columns?: GridResponsiveValue<number>;
+    gap?: GridResponsiveValue<GridLength>;
+    columnGap?: GridResponsiveValue<GridLength>;
+    rowGap?: GridResponsiveValue<GridLength>;
+    margin?: GridResponsiveValue<GridLength>;
+    maxWidth?: GridResponsiveValue<GridLength>;
+    bounded?: boolean;
+    className?: string;
+    children?: any;
+}
+export interface GridItemProps {
+    span?: GridResponsiveValue<GridSpan>;
+    className?: string;
+    children?: any;
+}
+export declare const defaultGridColumns: Partial<Record<GridBreakpoint, number>>;
+export declare const defaultGridGap: Partial<Record<GridBreakpoint, GridLength>>;
+export declare const defaultGridMargin: Partial<Record<GridBreakpoint, GridLength>>;
+export declare const defaultGridMaxWidth: Partial<Record<GridBreakpoint, GridLength>>;
+export declare function normalizeGridResponsiveValue<T>(value: GridResponsiveValue<T> | undefined, fallback?: Partial<Record<GridBreakpoint, T>>): Partial<Record<GridBreakpoint, T>>;
+export declare function getGridClassNames(props?: Pick<GridProps, 'bounded'>): string;
+export declare function getGridItemClassNames(): string;
+export declare function getGridStyleVars(props: Pick<GridProps, 'columns' | 'gap' | 'columnGap' | 'rowGap' | 'margin' | 'maxWidth' | 'bounded'>): Record<string, string>;
+export declare function getGridItemStyleVars(props: Pick<GridItemProps, 'span'>): Record<string, string>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../grid/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,eAAe,yCAA0C,CAAA;AAEtE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AACxC,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AACtC,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAA;AAE3E,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAA;IACrC,GAAG,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IACrC,SAAS,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAC3C,MAAM,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IACxC,MAAM,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IACxC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;CACf;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAMtE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,CAMtE,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,CAMzE,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,CAE3E,CAAA;AAQD,wBAAgB,4BAA4B,CAAC,CAAC,EAC5C,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,SAAS,EACzC,QAAQ,GAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAM,GAChD,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAgBpC;AAkBD,wBAAgB,iBAAiB,CAAC,KAAK,GAAE,IAAI,CAAC,SAAS,EAAE,SAAS,CAAM,GAAG,MAAM,CAMhF;AAED,wBAAgB,qBAAqB,IAAI,MAAM,CAE9C;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,IAAI,CACT,SAAS,EACT,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAC/E,GACA,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA0CxB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAa/F"}

package/dist/components/grid/index.js

@@ -0,0 +1,109 @@
+const gridBreakpoints = ["xs", "sm", "md", "lg", "xl"];
+const defaultGridColumns = {
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 10,
+  xl: 12
+};
+const defaultGridGap = {
+  xs: 12,
+  sm: 20,
+  md: 20,
+  lg: 20,
+  xl: 20
+};
+const defaultGridMargin = {
+  xs: 16,
+  sm: 24,
+  md: 24,
+  lg: 24,
+  xl: 24
+};
+const defaultGridMaxWidth = {
+  xl: 1440
+};
+function isGridResponsiveObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function normalizeGridResponsiveValue(value, fallback = {}) {
+  if (value === void 0) {
+    return { ...fallback };
+  }
+  if (isGridResponsiveObject(value)) {
+    return { ...fallback, ...value };
+  }
+  return {
+    xs: value,
+    sm: value,
+    md: value,
+    lg: value,
+    xl: value
+  };
+}
+function formatGridLength(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}px` : value;
+}
+function formatGridColumnValue(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return value === "full" ? "1 / -1" : `span ${value} / span ${value}`;
+}
+function getGridClassNames(props = {}) {
+  const classes = ["css-grid"];
+  classes.push(props.bounded === false ? "css-grid--fluid" : "css-grid--bounded");
+  return classes.join(" ");
+}
+function getGridItemClassNames() {
+  return "css-grid__item";
+}
+function getGridStyleVars(props) {
+  const columns = normalizeGridResponsiveValue(props.columns, defaultGridColumns);
+  const gap = normalizeGridResponsiveValue(props.gap, defaultGridGap);
+  const columnGap = normalizeGridResponsiveValue(props.columnGap, gap);
+  const rowGap = normalizeGridResponsiveValue(props.rowGap, gap);
+  const margin = normalizeGridResponsiveValue(props.margin, defaultGridMargin);
+  const maxWidth = props.bounded === false ? normalizeGridResponsiveValue("none") : normalizeGridResponsiveValue(props.maxWidth, defaultGridMaxWidth);
+  const styleVars = {};
+  gridBreakpoints.forEach((breakpoint) => {
+    const columnValue = columns[breakpoint];
+    const columnGapValue = columnGap[breakpoint];
+    const rowGapValue = rowGap[breakpoint];
+    const marginValue = margin[breakpoint];
+    const maxWidthValue = maxWidth[breakpoint];
+    if (columnValue !== void 0) {
+      styleVars[`--css-grid-columns-${breakpoint}`] = String(columnValue);
+    }
+    if (columnGapValue !== void 0) {
+      styleVars[`--css-grid-column-gap-${breakpoint}`] = formatGridLength(columnGapValue);
+    }
+    if (rowGapValue !== void 0) {
+      styleVars[`--css-grid-row-gap-${breakpoint}`] = formatGridLength(rowGapValue);
+    }
+    if (marginValue !== void 0) {
+      styleVars[`--css-grid-margin-${breakpoint}`] = formatGridLength(marginValue);
+    }
+    if (maxWidthValue !== void 0) {
+      styleVars[`--css-grid-max-width-${breakpoint}`] = formatGridLength(maxWidthValue);
+    }
+  });
+  return styleVars;
+}
+function getGridItemStyleVars(props) {
+  const span = normalizeGridResponsiveValue(props.span, { xs: 1 });
+  const styleVars = {};
+  gridBreakpoints.forEach((breakpoint) => {
+    const spanValue = span[breakpoint];
+    if (spanValue !== void 0) {
+      styleVars[`--css-grid-item-column-${breakpoint}`] = formatGridColumnValue(spanValue);
+    }
+  });
+  return styleVars;
+}
+
+export { defaultGridColumns, defaultGridGap, defaultGridMargin, defaultGridMaxWidth, getGridClassNames, getGridItemClassNames, getGridItemStyleVars, getGridStyleVars, gridBreakpoints, normalizeGridResponsiveValue };
+//# sourceMappingURL=index.js.map

package/dist/components/grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/grid/index.ts"],"sourcesContent":["/**\r\n * Grid 栅格组件 - 逻辑部分\r\n */\r\n\r\nexport const gridBreakpoints = ['xs', 'sm', 'md', 'lg', 'xl'] as const\r\n\r\nexport type GridBreakpoint = (typeof gridBreakpoints)[number]\r\nexport type GridLength = number | string\r\nexport type GridSpan = number | 'full'\r\nexport type GridResponsiveValue<T> = T | Partial<Record<GridBreakpoint, T>>\r\n\r\nexport interface GridProps {\r\n  columns?: GridResponsiveValue<number>\r\n  gap?: GridResponsiveValue<GridLength>\r\n  columnGap?: GridResponsiveValue<GridLength>\r\n  rowGap?: GridResponsiveValue<GridLength>\r\n  margin?: GridResponsiveValue<GridLength>\r\n  maxWidth?: GridResponsiveValue<GridLength>\r\n  bounded?: boolean\r\n  className?: string\r\n  children?: any\r\n}\r\n\r\nexport interface GridItemProps {\r\n  span?: GridResponsiveValue<GridSpan>\r\n  className?: string\r\n  children?: any\r\n}\r\n\r\nexport const defaultGridColumns: Partial<Record<GridBreakpoint, number>> = {\r\n  xs: 4,\r\n  sm: 6,\r\n  md: 8,\r\n  lg: 10,\r\n  xl: 12,\r\n}\r\n\r\nexport const defaultGridGap: Partial<Record<GridBreakpoint, GridLength>> = {\r\n  xs: 12,\r\n  sm: 20,\r\n  md: 20,\r\n  lg: 20,\r\n  xl: 20,\r\n}\r\n\r\nexport const defaultGridMargin: Partial<Record<GridBreakpoint, GridLength>> = {\r\n  xs: 16,\r\n  sm: 24,\r\n  md: 24,\r\n  lg: 24,\r\n  xl: 24,\r\n}\r\n\r\nexport const defaultGridMaxWidth: Partial<Record<GridBreakpoint, GridLength>> = {\r\n  xl: 1440,\r\n}\r\n\r\nfunction isGridResponsiveObject<T>(\r\n  value: GridResponsiveValue<T> | undefined\r\n): value is Partial<Record<GridBreakpoint, T>> {\r\n  return typeof value === 'object' && value !== null && !Array.isArray(value)\r\n}\r\n\r\nexport function normalizeGridResponsiveValue<T>(\r\n  value: GridResponsiveValue<T> | undefined,\r\n  fallback: Partial<Record<GridBreakpoint, T>> = {}\r\n): Partial<Record<GridBreakpoint, T>> {\r\n  if (value === undefined) {\r\n    return { ...fallback }\r\n  }\r\n\r\n  if (isGridResponsiveObject(value)) {\r\n    return { ...fallback, ...value }\r\n  }\r\n\r\n  return {\r\n    xs: value,\r\n    sm: value,\r\n    md: value,\r\n    lg: value,\r\n    xl: value,\r\n  }\r\n}\r\n\r\nfunction formatGridLength(value: GridLength | undefined) {\r\n  if (value === undefined) {\r\n    return undefined\r\n  }\r\n\r\n  return typeof value === 'number' ? `${value}px` : value\r\n}\r\n\r\nfunction formatGridColumnValue(value: GridSpan | undefined) {\r\n  if (value === undefined) {\r\n    return undefined\r\n  }\r\n\r\n  return value === 'full' ? '1 / -1' : `span ${value} / span ${value}`\r\n}\r\n\r\nexport function getGridClassNames(props: Pick<GridProps, 'bounded'> = {}): string {\r\n  const classes = ['css-grid']\r\n\r\n  classes.push(props.bounded === false ? 'css-grid--fluid' : 'css-grid--bounded')\r\n\r\n  return classes.join(' ')\r\n}\r\n\r\nexport function getGridItemClassNames(): string {\r\n  return 'css-grid__item'\r\n}\r\n\r\nexport function getGridStyleVars(\r\n  props: Pick<\r\n    GridProps,\r\n    'columns' | 'gap' | 'columnGap' | 'rowGap' | 'margin' | 'maxWidth' | 'bounded'\r\n  >\r\n): Record<string, string> {\r\n  const columns = normalizeGridResponsiveValue(props.columns, defaultGridColumns)\r\n  const gap = normalizeGridResponsiveValue(props.gap, defaultGridGap)\r\n  const columnGap = normalizeGridResponsiveValue(props.columnGap, gap)\r\n  const rowGap = normalizeGridResponsiveValue(props.rowGap, gap)\r\n  const margin = normalizeGridResponsiveValue(props.margin, defaultGridMargin)\r\n  const maxWidth =\r\n    props.bounded === false\r\n      ? normalizeGridResponsiveValue<GridLength>('none')\r\n      : normalizeGridResponsiveValue(props.maxWidth, defaultGridMaxWidth)\r\n\r\n  const styleVars: Record<string, string> = {}\r\n\r\n  gridBreakpoints.forEach(breakpoint => {\r\n    const columnValue = columns[breakpoint]\r\n    const columnGapValue = columnGap[breakpoint]\r\n    const rowGapValue = rowGap[breakpoint]\r\n    const marginValue = margin[breakpoint]\r\n    const maxWidthValue = maxWidth[breakpoint]\r\n\r\n    if (columnValue !== undefined) {\r\n      styleVars[`--css-grid-columns-${breakpoint}`] = String(columnValue)\r\n    }\r\n\r\n    if (columnGapValue !== undefined) {\r\n      styleVars[`--css-grid-column-gap-${breakpoint}`] = formatGridLength(columnGapValue) as string\r\n    }\r\n\r\n    if (rowGapValue !== undefined) {\r\n      styleVars[`--css-grid-row-gap-${breakpoint}`] = formatGridLength(rowGapValue) as string\r\n    }\r\n\r\n    if (marginValue !== undefined) {\r\n      styleVars[`--css-grid-margin-${breakpoint}`] = formatGridLength(marginValue) as string\r\n    }\r\n\r\n    if (maxWidthValue !== undefined) {\r\n      styleVars[`--css-grid-max-width-${breakpoint}`] = formatGridLength(maxWidthValue) as string\r\n    }\r\n  })\r\n\r\n  return styleVars\r\n}\r\n\r\nexport function getGridItemStyleVars(props: Pick<GridItemProps, 'span'>): Record<string, string> {\r\n  const span = normalizeGridResponsiveValue<GridSpan>(props.span, { xs: 1 })\r\n  const styleVars: Record<string, string> = {}\r\n\r\n  gridBreakpoints.forEach(breakpoint => {\r\n    const spanValue = span[breakpoint]\r\n\r\n    if (spanValue !== undefined) {\r\n      styleVars[`--css-grid-item-column-${breakpoint}`] = formatGridColumnValue(spanValue) as string\r\n    }\r\n  })\r\n\r\n  return styleVars\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/components/grid/style.css

@@ -0,0 +1,189 @@
+/**
+ * Grid 栅格组件样式
+ */
+
+.css-grid {
+  width: 100%;
+  padding-inline: var(--css-grid-margin-xs, 16px);
+  box-sizing: border-box;
+}
+
+.css-grid__inner {
+  display: grid;
+  width: 100%;
+  margin-inline: auto;
+  box-sizing: border-box;
+  grid-template-columns: repeat(var(--css-grid-columns-xs, 4), minmax(0, 1fr));
+  column-gap: var(--css-grid-column-gap-xs, 12px);
+  row-gap: var(--css-grid-row-gap-xs, 12px);
+  max-width: var(--css-grid-max-width-xs, none);
+}
+
+.css-grid__item {
+  min-width: 0;
+  grid-column: var(--css-grid-item-column-xs, span 1 / span 1);
+}
+
+@media (min-width: 768px) {
+  .css-grid {
+    padding-inline: var(--css-grid-margin-sm, var(--css-grid-margin-xs, 16px));
+  }
+
+  .css-grid__inner {
+    grid-template-columns: repeat(
+      var(--css-grid-columns-sm, var(--css-grid-columns-xs, 4)),
+      minmax(0, 1fr)
+    );
+    column-gap: var(--css-grid-column-gap-sm, var(--css-grid-column-gap-xs, 12px));
+    row-gap: var(--css-grid-row-gap-sm, var(--css-grid-row-gap-xs, 12px));
+    max-width: var(--css-grid-max-width-sm, var(--css-grid-max-width-xs, none));
+  }
+
+  .css-grid__item {
+    grid-column: var(--css-grid-item-column-sm, var(--css-grid-item-column-xs, span 1 / span 1));
+  }
+}
+
+@media (min-width: 1024px) {
+  .css-grid {
+    padding-inline: var(
+      --css-grid-margin-md,
+      var(--css-grid-margin-sm, var(--css-grid-margin-xs, 16px))
+    );
+  }
+
+  .css-grid__inner {
+    grid-template-columns: repeat(
+      var(--css-grid-columns-md, var(--css-grid-columns-sm, var(--css-grid-columns-xs, 4))),
+      minmax(0, 1fr)
+    );
+    column-gap: var(
+      --css-grid-column-gap-md,
+      var(--css-grid-column-gap-sm, var(--css-grid-column-gap-xs, 12px))
+    );
+    row-gap: var(
+      --css-grid-row-gap-md,
+      var(--css-grid-row-gap-sm, var(--css-grid-row-gap-xs, 12px))
+    );
+    max-width: var(
+      --css-grid-max-width-md,
+      var(--css-grid-max-width-sm, var(--css-grid-max-width-xs, none))
+    );
+  }
+
+  .css-grid__item {
+    grid-column: var(
+      --css-grid-item-column-md,
+      var(--css-grid-item-column-sm, var(--css-grid-item-column-xs, span 1 / span 1))
+    );
+  }
+}
+
+@media (min-width: 1280px) {
+  .css-grid {
+    padding-inline: var(
+      --css-grid-margin-lg,
+      var(--css-grid-margin-md, var(--css-grid-margin-sm, var(--css-grid-margin-xs, 16px)))
+    );
+  }
+
+  .css-grid__inner {
+    grid-template-columns: repeat(
+      var(
+        --css-grid-columns-lg,
+        var(--css-grid-columns-md, var(--css-grid-columns-sm, var(--css-grid-columns-xs, 4)))
+      ),
+      minmax(0, 1fr)
+    );
+    column-gap: var(
+      --css-grid-column-gap-lg,
+      var(
+        --css-grid-column-gap-md,
+        var(--css-grid-column-gap-sm, var(--css-grid-column-gap-xs, 12px))
+      )
+    );
+    row-gap: var(
+      --css-grid-row-gap-lg,
+      var(--css-grid-row-gap-md, var(--css-grid-row-gap-sm, var(--css-grid-row-gap-xs, 12px)))
+    );
+    max-width: var(
+      --css-grid-max-width-lg,
+      var(--css-grid-max-width-md, var(--css-grid-max-width-sm, var(--css-grid-max-width-xs, none)))
+    );
+  }
+
+  .css-grid__item {
+    grid-column: var(
+      --css-grid-item-column-lg,
+      var(
+        --css-grid-item-column-md,
+        var(--css-grid-item-column-sm, var(--css-grid-item-column-xs, span 1 / span 1))
+      )
+    );
+  }
+}
+
+@media (min-width: 1440px) {
+  .css-grid {
+    padding-inline: var(
+      --css-grid-margin-xl,
+      var(
+        --css-grid-margin-lg,
+        var(--css-grid-margin-md, var(--css-grid-margin-sm, var(--css-grid-margin-xs, 16px)))
+      )
+    );
+  }
+
+  .css-grid__inner {
+    grid-template-columns: repeat(
+      var(
+        --css-grid-columns-xl,
+        var(
+          --css-grid-columns-lg,
+          var(--css-grid-columns-md, var(--css-grid-columns-sm, var(--css-grid-columns-xs, 4)))
+        )
+      ),
+      minmax(0, 1fr)
+    );
+    column-gap: var(
+      --css-grid-column-gap-xl,
+      var(
+        --css-grid-column-gap-lg,
+        var(
+          --css-grid-column-gap-md,
+          var(--css-grid-column-gap-sm, var(--css-grid-column-gap-xs, 12px))
+        )
+      )
+    );
+    row-gap: var(
+      --css-grid-row-gap-xl,
+      var(
+        --css-grid-row-gap-lg,
+        var(--css-grid-row-gap-md, var(--css-grid-row-gap-sm, var(--css-grid-row-gap-xs, 12px)))
+      )
+    );
+    max-width: var(
+      --css-grid-max-width-xl,
+      var(
+        --css-grid-max-width-lg,
+        var(
+          --css-grid-max-width-md,
+          var(--css-grid-max-width-sm, var(--css-grid-max-width-xs, none))
+        )
+      )
+    );
+  }
+
+  .css-grid__item {
+    grid-column: var(
+      --css-grid-item-column-xl,
+      var(
+        --css-grid-item-column-lg,
+        var(
+          --css-grid-item-column-md,
+          var(--css-grid-item-column-sm, var(--css-grid-item-column-xs, span 1 / span 1))
+        )
+      )
+    );
+  }
+}

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

@@ -0,0 +1,35 @@
+import './style.css';
+export interface IconProps {
+    /**
+     * 图标尺寸
+     */
+    size?: number | string;
+    /**
+     * 图标颜色
+     */
+    color?: string;
+    /**
+     * 是否旋转动画
+     */
+    spin?: boolean;
+    /**
+     * 旋转角度
+     */
+    rotate?: number;
+    /**
+     * 自定义组件（兼容旧版）
+     * @deprecated 使用 icon 属性代替
+     */
+    component?: any;
+    /**
+     * 内置图标名称
+     * 例如: 'LogoBlock', 'LogoHorizontal'
+     */
+    name?: string;
+    /**
+     * 自定义图标组件
+     */
+    icon?: any;
+}
+export declare const getIconStyle: (props: Pick<IconProps, "size" | "color" | "rotate">) => Record<string, string | number>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,GAAG,CAAA;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAA;CACX;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,oCAgB/E,CAAA"}

package/dist/components/icon/index.js

@@ -0,0 +1,16 @@
+const getIconStyle = (props) => {
+  const style = {};
+  if (props.size) {
+    style.fontSize = typeof props.size === "number" ? `${props.size}px` : props.size;
+  }
+  if (props.color) {
+    style.color = props.color;
+  }
+  if (props.rotate) {
+    style.transform = `rotate(${props.rotate}deg)`;
+  }
+  return style;
+};
+
+export { getIconStyle };
+//# sourceMappingURL=index.js.map

package/dist/components/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/icon/index.ts"],"sourcesContent":["import './style.css'\n\nexport interface IconProps {\n  /**\n   * 图标尺寸\n   */\n  size?: number | string\n  /**\n   * 图标颜色\n   */\n  color?: string\n  /**\n   * 是否旋转动画\n   */\n  spin?: boolean\n  /**\n   * 旋转角度\n   */\n  rotate?: number\n  /**\n   * 自定义组件（兼容旧版）\n   * @deprecated 使用 icon 属性代替\n   */\n  component?: any\n  /**\n   * 内置图标名称\n   * 例如: 'LogoBlock', 'LogoHorizontal'\n   */\n  name?: string\n  /**\n   * 自定义图标组件\n   */\n  icon?: any\n}\n\nexport const getIconStyle = (props: Pick<IconProps, 'size' | 'color' | 'rotate'>) => {\n  const style: Record<string, string | number> = {}\n\n  if (props.size) {\n    style.fontSize = typeof props.size === 'number' ? `${props.size}px` : props.size\n  }\n\n  if (props.color) {\n    style.color = props.color\n  }\n\n  if (props.rotate) {\n    style.transform = `rotate(${props.rotate}deg)`\n  }\n\n  return style\n}\n"],"names":[],"mappings":"AAmCO,MAAM,YAAA,GAAe,CAAC,KAAA,KAAwD;AACnF,EAAA,MAAM,QAAyC,EAAC;AAEhD,EAAA,IAAI,MAAM,IAAA,EAAM;AACd,IAAA,KAAA,CAAM,QAAA,GAAW,OAAO,KAAA,CAAM,IAAA,KAAS,WAAW,CAAA,EAAG,KAAA,CAAM,IAAI,CAAA,EAAA,CAAA,GAAO,KAAA,CAAM,IAAA;AAAA,EAC9E;AAEA,EAAA,IAAI,MAAM,KAAA,EAAO;AACf,IAAA,KAAA,CAAM,QAAQ,KAAA,CAAM,KAAA;AAAA,EACtB;AAEA,EAAA,IAAI,MAAM,MAAA,EAAQ;AAChB,IAAA,KAAA,CAAM,SAAA,GAAY,CAAA,OAAA,EAAU,KAAA,CAAM,MAAM,CAAA,IAAA,CAAA;AAAA,EAC1C;AAEA,EAAA,OAAO,KAAA;AACT;;;;"}

package/dist/components/icon/style.css

@@ -0,0 +1,28 @@
+/* Base styles for icon wrapper */
+.css-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  font-size: inherit; /* Allow font-size inheritance */
+  vertical-align: middle;
+}
+
+.css-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+/* Spin animation */
+.css-icon-spin {
+  animation: css-icon-spin 1s linear infinite;
+}
+
+@keyframes css-icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,29 @@
+/**
+ * Input 组件 - 逻辑部分
+ */
+export type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'search' | 'textarea';
+export type InputStatus = 'default' | 'error' | 'typing';
+export interface InputProps {
+    /** 组件标签，展示在上方 */
+    label?: string;
+    /** 原生 input type 属性 */
+    type?: InputType;
+    /** 输入状态 */
+    status?: InputStatus;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 输入值 */
+    value?: string;
+    /** 占位文案 */
+    placeholder?: string;
+    /** 多行文本行数，仅 textarea 使用 */
+    rows?: number;
+    /** 自定义图标，type 为 search 时默认显示 Search 图标 */
+    icon?: string;
+    /** 类名 */
+    className?: string;
+    /** 变更事件 */
+    onChange?: (value: string, event?: Event) => void;
+}
+export declare function getInputClassNames(props: InputProps): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../input/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,UAAU,GACV,QAAQ,GACR,OAAO,GACP,KAAK,GACL,KAAK,GACL,QAAQ,GACR,UAAU,CAAA;AACd,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExD,MAAM,WAAW,UAAU;IACzB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,WAAW;IACX,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS;IACT,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW;IACX,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;CAClD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAoB5D"}

package/dist/components/input/index.js

@@ -0,0 +1,19 @@
+function getInputClassNames(props) {
+  const { type = "text", status = "default", disabled = false, icon } = props;
+  const classes = ["css-input"];
+  if (type === "textarea") {
+    classes.push("css-input--textarea");
+  }
+  if (type === "search" || icon) {
+    classes.push("css-input--text-icon");
+  }
+  if (disabled) {
+    classes.push("css-input--disabled");
+  } else {
+    classes.push(`css-input--${status}`);
+  }
+  return classes.join(" ");
+}
+
+export { getInputClassNames };
+//# sourceMappingURL=index.js.map

package/dist/components/input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/input/index.ts"],"sourcesContent":["/**\n * Input 组件 - 逻辑部分\n */\n\nexport type InputType =\n  | 'text'\n  | 'password'\n  | 'number'\n  | 'email'\n  | 'tel'\n  | 'url'\n  | 'search'\n  | 'textarea'\nexport type InputStatus = 'default' | 'error' | 'typing'\n\nexport interface InputProps {\n  /** 组件标签，展示在上方 */\n  label?: string\n  /** 原生 input type 属性 */\n  type?: InputType\n  /** 输入状态 */\n  status?: InputStatus\n  /** 是否禁用 */\n  disabled?: boolean\n  /** 输入值 */\n  value?: string\n  /** 占位文案 */\n  placeholder?: string\n  /** 多行文本行数，仅 textarea 使用 */\n  rows?: number\n  /** 自定义图标，type 为 search 时默认显示 Search 图标 */\n  icon?: string\n  /** 类名 */\n  className?: string\n  /** 变更事件 */\n  onChange?: (value: string, event?: Event) => void\n}\n\nexport function getInputClassNames(props: InputProps): string {\n  const { type = 'text', status = 'default', disabled = false, icon } = props\n\n  const classes = ['css-input']\n\n  if (type === 'textarea') {\n    classes.push('css-input--textarea')\n  }\n\n  if (type === 'search' || icon) {\n    classes.push('css-input--text-icon')\n  }\n\n  if (disabled) {\n    classes.push('css-input--disabled')\n  } else {\n    classes.push(`css-input--${status}`)\n  }\n\n  return classes.join(' ')\n}\n"],"names":[],"mappings":"AAsCO,SAAS,mBAAmB,KAAA,EAA2B;AAC5D,EAAA,MAAM,EAAE,OAAO,MAAA,EAAQ,MAAA,GAAS,WAAW,QAAA,GAAW,KAAA,EAAO,MAAK,GAAI,KAAA;AAEtE,EAAA,MAAM,OAAA,GAAU,CAAC,WAAW,CAAA;AAE5B,EAAA,IAAI,SAAS,UAAA,EAAY;AACvB,IAAA,OAAA,CAAQ,KAAK,qBAAqB,CAAA;AAAA,EACpC;AAEA,EAAA,IAAI,IAAA,KAAS,YAAY,IAAA,EAAM;AAC7B,IAAA,OAAA,CAAQ,KAAK,sBAAsB,CAAA;AAAA,EACrC;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAA,CAAQ,KAAK,qBAAqB,CAAA;AAAA,EACpC,CAAA,MAAO;AACL,IAAA,OAAA,CAAQ,IAAA,CAAK,CAAA,WAAA,EAAc,MAAM,CAAA,CAAE,CAAA;AAAA,EACrC;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;;;;"}