ods-ant 0.2.0 → 0.4.0

package/dist-lib/feedback/Skeleton.cjs

@@ -0,0 +1,214 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`);let t=require(`antd`),n=require(`react`),r=require(`react/jsx-runtime`);var i=`ds-skeleton-styles`,a=`ds-skeleton`,o={table:4,card:1,form:4,details:4,list:4},s={table:4,card:1,form:1,details:2,list:1};function c(...e){return e.filter(Boolean).join(` `).trim()}function l(e,t,n,r){return e===void 0||Number.isNaN(e)?t:Math.min(Math.max(Math.round(e),n),r)}function u(e){return Array.from({length:e},(e,t)=>t)}function d(){if(typeof document>`u`)return;let{skeleton:t}=e.dsSemanticTokens,n=document.getElementById(i);n||(n=document.createElement(`style`),n.id=i,document.head.appendChild(n)),n.textContent=`
+    .${a} {
+      box-sizing: border-box;
+      width: 100%;
+      padding: ${t.spacing.shell};
+      border: 1px solid ${t.border.default};
+      border-radius: ${t.border.radius};
+      background: ${t.surface.default};
+      color: ${t.placeholder.base};
+      font-family: 'Nunito', sans-serif;
+      --ds-skeleton-placeholder: ${t.placeholder.base};
+      --ds-skeleton-placeholder-strong: ${t.placeholder.strong};
+      --ds-skeleton-highlight: ${t.placeholder.highlight};
+    }
+
+    .${a},
+    .${a} * {
+      box-sizing: border-box;
+    }
+
+    .${a} .ant-skeleton,
+    .${a} .ant-skeleton-element {
+      width: 100%;
+      display: block;
+    }
+
+    .${a} .ant-skeleton-input,
+    .${a} .ant-skeleton-button,
+    .${a} .ant-skeleton-avatar,
+    .${a} .ant-skeleton-image {
+      background-color: var(--ds-skeleton-placeholder) !important;
+    }
+
+    .${a} .ant-skeleton-input,
+    .${a} .ant-skeleton-button {
+      min-width: 0 !important;
+      width: 100% !important;
+      border-radius: ${t.border.radius} !important;
+    }
+
+    .${a} .ant-skeleton-avatar {
+      width: ${t.size.listAvatar}px !important;
+      height: ${t.size.listAvatar}px !important;
+      min-width: ${t.size.listAvatar}px !important;
+    }
+
+    .${a} .ant-skeleton-image {
+      width: 100% !important;
+      height: 100% !important;
+      border-radius: ${t.border.radius} !important;
+    }
+
+    .${a}[data-ds-skeleton-round='false'] .ant-skeleton-input,
+    .${a}[data-ds-skeleton-round='false'] .ant-skeleton-button,
+    .${a}[data-ds-skeleton-round='false'] .ant-skeleton-avatar,
+    .${a}[data-ds-skeleton-round='false'] .ant-skeleton-image {
+      border-radius: 0 !important;
+    }
+
+    .${a} .ds-skeleton-line .ant-skeleton-input,
+    .${a} .ds-skeleton-line.ant-skeleton-input {
+      height: 14px !important;
+    }
+
+    .ds-skeleton-line-strong .ant-skeleton-input,
+    .ds-skeleton-line-strong.ant-skeleton-input {
+      background-color: var(--ds-skeleton-placeholder-strong) !important;
+    }
+
+    .ds-skeleton-table {
+      display: flex;
+      flex-direction: column;
+      gap: ${t.spacing.compactRowGap};
+      background: ${t.surface.default};
+    }
+
+    .ds-skeleton-table-grid {
+      display: grid;
+      grid-template-columns: repeat(var(--ds-skeleton-columns), minmax(0, 1fr));
+      gap: 12px;
+      align-items: center;
+    }
+
+    .ds-skeleton-table-header {
+      min-height: ${t.size.tableHeader};
+      padding-bottom: 10px;
+      border-bottom: 1px solid ${t.border.default};
+    }
+
+    .ds-skeleton-table-row {
+      min-height: ${t.size.tableRow};
+      padding: 8px 0;
+      border-bottom: 1px solid ${t.border.default};
+    }
+
+    .ds-skeleton-table-row:last-child {
+      border-bottom: 0;
+    }
+
+    .ds-skeleton-card {
+      display: grid;
+      grid-template-columns: minmax(128px, 32%) minmax(0, 1fr);
+      gap: 16px;
+      align-items: stretch;
+      background: ${t.surface.default};
+    }
+
+    .ds-skeleton-card-media {
+      min-height: ${t.size.cardMedia};
+    }
+
+    .ds-skeleton-card-body,
+    .ds-skeleton-form,
+    .ds-skeleton-details,
+    .ds-skeleton-list {
+      display: flex;
+      flex-direction: column;
+      gap: ${t.spacing.rowGap};
+    }
+
+    .ds-skeleton-card-action {
+      width: 132px;
+      max-width: 48%;
+      margin-top: 6px;
+    }
+
+    .ds-skeleton-form-row {
+      display: grid;
+      grid-template-columns: minmax(112px, 24%) minmax(0, 1fr);
+      gap: 12px;
+      align-items: center;
+    }
+
+    .ds-skeleton-form-control .ant-skeleton-input,
+    .ds-skeleton-form-control.ant-skeleton-input {
+      height: ${t.size.formInput} !important;
+    }
+
+    .ds-skeleton-details {
+      padding: 0;
+    }
+
+    .ds-skeleton-details-row {
+      display: grid;
+      grid-template-columns: repeat(var(--ds-skeleton-columns), minmax(0, 1fr));
+      gap: 16px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid ${t.border.default};
+    }
+
+    .ds-skeleton-details-row:last-child {
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    .ds-skeleton-details-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .ds-skeleton-details-value .ant-skeleton-input,
+    .ds-skeleton-details-value.ant-skeleton-input {
+      height: ${t.size.detailsValue} !important;
+    }
+
+    .ds-skeleton-list-item {
+      display: grid;
+      grid-template-columns: ${t.size.listAvatar}px minmax(0, 1fr) 92px;
+      gap: 12px;
+      align-items: center;
+      min-height: 54px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid ${t.border.default};
+    }
+
+    .ds-skeleton-list-item:last-child {
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    .ds-skeleton-list-copy {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .ds-skeleton-list-action {
+      min-width: 0;
+    }
+
+    @media (max-width: 640px) {
+      .${a} {
+        padding: ${t.spacing.compactShell};
+      }
+
+      .ds-skeleton-card,
+      .ds-skeleton-form-row,
+      .ds-skeleton-list-item {
+        grid-template-columns: 1fr;
+      }
+
+      .ds-skeleton-card-media {
+        min-height: 96px;
+      }
+
+      .ds-skeleton-list-action {
+        width: 50%;
+      }
+    }
+  `}function f({active:e,width:n,strong:i,className:a}){return(0,r.jsx)(t.Skeleton.Input,{active:e,block:!0,className:c(`ds-skeleton-line`,i?`ds-skeleton-line-strong`:void 0,a),size:`small`,style:{width:n}})}function p(e,t,n){return(0,r.jsxs)(`div`,{className:`ds-skeleton-table`,style:{"--ds-skeleton-columns":n},children:[(0,r.jsx)(`div`,{className:`ds-skeleton-table-grid ds-skeleton-table-header`,children:u(n).map(t=>(0,r.jsx)(f,{active:e,width:t===n-1?`56%`:`72%`,strong:!0},t))}),u(t).map(t=>(0,r.jsx)(`div`,{className:`ds-skeleton-table-grid ds-skeleton-table-row`,children:u(n).map(t=>(0,r.jsx)(f,{active:e,width:t===0?`84%`:t===n-1?`48%`:`68%`},t))},t))]})}function m(e,n){return(0,r.jsxs)(`div`,{className:`ds-skeleton-card`,children:[(0,r.jsx)(`div`,{className:`ds-skeleton-card-media`,children:(0,r.jsx)(t.Skeleton.Image,{active:e})}),(0,r.jsxs)(`div`,{className:`ds-skeleton-card-body`,children:[(0,r.jsx)(f,{active:e,width:`48%`,strong:!0}),(0,r.jsx)(f,{active:e,width:`92%`}),(0,r.jsx)(f,{active:e,width:`78%`}),(0,r.jsx)(f,{active:e,width:`64%`}),(0,r.jsx)(`div`,{className:`ds-skeleton-card-action`,children:(0,r.jsx)(t.Skeleton.Button,{active:e,block:!0,shape:n?`round`:`default`,size:`small`})})]})]})}function h(e,n){return(0,r.jsx)(`div`,{className:`ds-skeleton-form`,children:u(n).map(n=>(0,r.jsxs)(`div`,{className:`ds-skeleton-form-row`,children:[(0,r.jsx)(f,{active:e,width:n%2==0?`72%`:`58%`,strong:!0}),(0,r.jsx)(t.Skeleton.Input,{active:e,block:!0,className:`ds-skeleton-form-control`,size:`default`})]},n))})}function g(e,t,n){return(0,r.jsx)(`div`,{className:`ds-skeleton-details`,style:{"--ds-skeleton-columns":n},children:u(t).map(t=>(0,r.jsx)(`div`,{className:`ds-skeleton-details-row`,children:u(n).map(n=>(0,r.jsxs)(`div`,{className:`ds-skeleton-details-cell`,children:[(0,r.jsx)(f,{active:e,width:`44%`,strong:!0}),(0,r.jsx)(f,{active:e,width:(t+n)%2==0?`82%`:`64%`,className:`ds-skeleton-details-value`})]},n))},t))})}function _(e,n,i){return(0,r.jsx)(`div`,{className:`ds-skeleton-list`,children:u(i).map(i=>(0,r.jsxs)(`div`,{className:`ds-skeleton-list-item`,children:[(0,r.jsx)(t.Skeleton.Avatar,{active:e,shape:`circle`}),(0,r.jsxs)(`div`,{className:`ds-skeleton-list-copy`,children:[(0,r.jsx)(f,{active:e,width:i%2==0?`54%`:`68%`,strong:!0}),(0,r.jsx)(f,{active:e,width:i%2==0?`82%`:`72%`})]}),(0,r.jsx)(`div`,{className:`ds-skeleton-list-action`,children:(0,r.jsx)(t.Skeleton.Button,{active:e,block:!0,shape:n?`round`:`default`,size:`small`})})]},i))})}function v(e,t,n,r,i){return e===`table`?p(t,r,i):e===`card`?m(t,n):e===`form`?h(t,r):e===`details`?g(t,r,i):_(t,n,r)}var y=({active:e=!0,children:t,className:i,dsColumns:u,dsRows:f,dsVariant:p=`table`,loading:m=!0,rootClassName:h,round:g=!0,style:_})=>{if((0,n.useEffect)(()=>{d()},[]),m===!1)return t?(0,r.jsx)(r.Fragment,{children:t}):null;let y=l(f,o[p],1,8),b=l(u,s[p],1,6);return(0,r.jsx)(`div`,{"aria-label":`Loading`,className:c(a,h,i),"data-ds-skeleton-variant":p,"data-ds-skeleton-round":g?`true`:`false`,role:`status`,style:_,children:v(p,e,g,y,b)})};y.displayName=`Skeleton`,y.Button=t.Skeleton.Button,y.Avatar=t.Skeleton.Avatar,y.Input=t.Skeleton.Input,y.Image=t.Skeleton.Image,y.Node=t.Skeleton.Node,exports.Skeleton=y;
+//# sourceMappingURL=Skeleton.cjs.map

package/dist-lib/feedback/Skeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.cjs","names":[],"sources":["../../src/ds/feedback/Skeleton.tsx"],"sourcesContent":["import { Skeleton as AntSkeleton } from 'antd';\nimport type { SkeletonProps as AntSkeletonProps } from 'antd';\nimport type { CSSProperties, FC, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSSkeletonVariant = 'table' | 'card' | 'form' | 'details' | 'list';\n\ntype RestrictedAntProps = 'avatar' | 'paragraph' | 'title' | 'classNames' | 'styles' | 'prefixCls';\n\nexport type SkeletonProps = Omit<AntSkeletonProps, RestrictedAntProps> & {\n  /** Semantic DS skeleton layout matching the content being loaded. */\n  dsVariant?: DSSkeletonVariant;\n  /** Number of placeholder rows rendered by row-based DS variants. */\n  dsRows?: number;\n  /** Number of placeholder columns rendered by table/details DS variants. */\n  dsColumns?: number;\n  /** Loaded content rendered when `loading` is false. */\n  children?: ReactNode;\n};\n\ntype DSSkeletonComponent = FC<SkeletonProps> & {\n  Button: typeof AntSkeleton.Button;\n  Avatar: typeof AntSkeleton.Avatar;\n  Input: typeof AntSkeleton.Input;\n  Image: typeof AntSkeleton.Image;\n  Node: typeof AntSkeleton.Node;\n};\n\nconst STYLE_ID = 'ds-skeleton-styles';\nconst DS_SKELETON_CLASS = 'ds-skeleton';\n\nconst DEFAULT_ROWS: Record<DSSkeletonVariant, number> = {\n  table: 4,\n  card: 1,\n  form: 4,\n  details: 4,\n  list: 4,\n};\n\nconst DEFAULT_COLUMNS: Record<DSSkeletonVariant, number> = {\n  table: 4,\n  card: 1,\n  form: 1,\n  details: 2,\n  list: 1,\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction clampCount(value: number | undefined, fallback: number, min: number, max: number) {\n  if (value === undefined || Number.isNaN(value)) return fallback;\n  return Math.min(Math.max(Math.round(value), min), max);\n}\n\nfunction createRange(count: number) {\n  return Array.from({ length: count }, (_, index) => index);\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { skeleton } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .${DS_SKELETON_CLASS} {\n      box-sizing: border-box;\n      width: 100%;\n      padding: ${skeleton.spacing.shell};\n      border: 1px solid ${skeleton.border.default};\n      border-radius: ${skeleton.border.radius};\n      background: ${skeleton.surface.default};\n      color: ${skeleton.placeholder.base};\n      font-family: 'Nunito', sans-serif;\n      --ds-skeleton-placeholder: ${skeleton.placeholder.base};\n      --ds-skeleton-placeholder-strong: ${skeleton.placeholder.strong};\n      --ds-skeleton-highlight: ${skeleton.placeholder.highlight};\n    }\n\n    .${DS_SKELETON_CLASS},\n    .${DS_SKELETON_CLASS} * {\n      box-sizing: border-box;\n    }\n\n    .${DS_SKELETON_CLASS} .ant-skeleton,\n    .${DS_SKELETON_CLASS} .ant-skeleton-element {\n      width: 100%;\n      display: block;\n    }\n\n    .${DS_SKELETON_CLASS} .ant-skeleton-input,\n    .${DS_SKELETON_CLASS} .ant-skeleton-button,\n    .${DS_SKELETON_CLASS} .ant-skeleton-avatar,\n    .${DS_SKELETON_CLASS} .ant-skeleton-image {\n      background-color: var(--ds-skeleton-placeholder) !important;\n    }\n\n    .${DS_SKELETON_CLASS} .ant-skeleton-input,\n    .${DS_SKELETON_CLASS} .ant-skeleton-button {\n      min-width: 0 !important;\n      width: 100% !important;\n      border-radius: ${skeleton.border.radius} !important;\n    }\n\n    .${DS_SKELETON_CLASS} .ant-skeleton-avatar {\n      width: ${skeleton.size.listAvatar}px !important;\n      height: ${skeleton.size.listAvatar}px !important;\n      min-width: ${skeleton.size.listAvatar}px !important;\n    }\n\n    .${DS_SKELETON_CLASS} .ant-skeleton-image {\n      width: 100% !important;\n      height: 100% !important;\n      border-radius: ${skeleton.border.radius} !important;\n    }\n\n    .${DS_SKELETON_CLASS}[data-ds-skeleton-round='false'] .ant-skeleton-input,\n    .${DS_SKELETON_CLASS}[data-ds-skeleton-round='false'] .ant-skeleton-button,\n    .${DS_SKELETON_CLASS}[data-ds-skeleton-round='false'] .ant-skeleton-avatar,\n    .${DS_SKELETON_CLASS}[data-ds-skeleton-round='false'] .ant-skeleton-image {\n      border-radius: 0 !important;\n    }\n\n    .${DS_SKELETON_CLASS} .ds-skeleton-line .ant-skeleton-input,\n    .${DS_SKELETON_CLASS} .ds-skeleton-line.ant-skeleton-input {\n      height: 14px !important;\n    }\n\n    .ds-skeleton-line-strong .ant-skeleton-input,\n    .ds-skeleton-line-strong.ant-skeleton-input {\n      background-color: var(--ds-skeleton-placeholder-strong) !important;\n    }\n\n    .ds-skeleton-table {\n      display: flex;\n      flex-direction: column;\n      gap: ${skeleton.spacing.compactRowGap};\n      background: ${skeleton.surface.default};\n    }\n\n    .ds-skeleton-table-grid {\n      display: grid;\n      grid-template-columns: repeat(var(--ds-skeleton-columns), minmax(0, 1fr));\n      gap: 12px;\n      align-items: center;\n    }\n\n    .ds-skeleton-table-header {\n      min-height: ${skeleton.size.tableHeader};\n      padding-bottom: 10px;\n      border-bottom: 1px solid ${skeleton.border.default};\n    }\n\n    .ds-skeleton-table-row {\n      min-height: ${skeleton.size.tableRow};\n      padding: 8px 0;\n      border-bottom: 1px solid ${skeleton.border.default};\n    }\n\n    .ds-skeleton-table-row:last-child {\n      border-bottom: 0;\n    }\n\n    .ds-skeleton-card {\n      display: grid;\n      grid-template-columns: minmax(128px, 32%) minmax(0, 1fr);\n      gap: 16px;\n      align-items: stretch;\n      background: ${skeleton.surface.default};\n    }\n\n    .ds-skeleton-card-media {\n      min-height: ${skeleton.size.cardMedia};\n    }\n\n    .ds-skeleton-card-body,\n    .ds-skeleton-form,\n    .ds-skeleton-details,\n    .ds-skeleton-list {\n      display: flex;\n      flex-direction: column;\n      gap: ${skeleton.spacing.rowGap};\n    }\n\n    .ds-skeleton-card-action {\n      width: 132px;\n      max-width: 48%;\n      margin-top: 6px;\n    }\n\n    .ds-skeleton-form-row {\n      display: grid;\n      grid-template-columns: minmax(112px, 24%) minmax(0, 1fr);\n      gap: 12px;\n      align-items: center;\n    }\n\n    .ds-skeleton-form-control .ant-skeleton-input,\n    .ds-skeleton-form-control.ant-skeleton-input {\n      height: ${skeleton.size.formInput} !important;\n    }\n\n    .ds-skeleton-details {\n      padding: 0;\n    }\n\n    .ds-skeleton-details-row {\n      display: grid;\n      grid-template-columns: repeat(var(--ds-skeleton-columns), minmax(0, 1fr));\n      gap: 16px;\n      padding-bottom: 10px;\n      border-bottom: 1px solid ${skeleton.border.default};\n    }\n\n    .ds-skeleton-details-row:last-child {\n      border-bottom: 0;\n      padding-bottom: 0;\n    }\n\n    .ds-skeleton-details-cell {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ds-skeleton-details-value .ant-skeleton-input,\n    .ds-skeleton-details-value.ant-skeleton-input {\n      height: ${skeleton.size.detailsValue} !important;\n    }\n\n    .ds-skeleton-list-item {\n      display: grid;\n      grid-template-columns: ${skeleton.size.listAvatar}px minmax(0, 1fr) 92px;\n      gap: 12px;\n      align-items: center;\n      min-height: 54px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid ${skeleton.border.default};\n    }\n\n    .ds-skeleton-list-item:last-child {\n      border-bottom: 0;\n      padding-bottom: 0;\n    }\n\n    .ds-skeleton-list-copy {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      min-width: 0;\n    }\n\n    .ds-skeleton-list-action {\n      min-width: 0;\n    }\n\n    @media (max-width: 640px) {\n      .${DS_SKELETON_CLASS} {\n        padding: ${skeleton.spacing.compactShell};\n      }\n\n      .ds-skeleton-card,\n      .ds-skeleton-form-row,\n      .ds-skeleton-list-item {\n        grid-template-columns: 1fr;\n      }\n\n      .ds-skeleton-card-media {\n        min-height: 96px;\n      }\n\n      .ds-skeleton-list-action {\n        width: 50%;\n      }\n    }\n  `;\n}\n\nfunction SkeletonLine({ active, width, strong, className }: {\n  active: boolean;\n  width?: CSSProperties['width'];\n  strong?: boolean;\n  className?: string;\n}) {\n  return (\n    <AntSkeleton.Input\n      active={active}\n      block\n      className={mergeClassNames('ds-skeleton-line', strong ? 'ds-skeleton-line-strong' : undefined, className)}\n      size=\"small\"\n      style={{ width }}\n    />\n  );\n}\n\nfunction renderTable(active: boolean, rowCount: number, columnCount: number) {\n  return (\n    <div className=\"ds-skeleton-table\" style={{ '--ds-skeleton-columns': columnCount } as CSSProperties}>\n      <div className=\"ds-skeleton-table-grid ds-skeleton-table-header\">\n        {createRange(columnCount).map((columnIndex) => (\n          <SkeletonLine key={columnIndex} active={active} width={columnIndex === columnCount - 1 ? '56%' : '72%'} strong />\n        ))}\n      </div>\n      {createRange(rowCount).map((rowIndex) => (\n        <div className=\"ds-skeleton-table-grid ds-skeleton-table-row\" key={rowIndex}>\n          {createRange(columnCount).map((columnIndex) => (\n            <SkeletonLine key={columnIndex} active={active} width={columnIndex === 0 ? '84%' : columnIndex === columnCount - 1 ? '48%' : '68%'} />\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderCard(active: boolean, round: boolean) {\n  return (\n    <div className=\"ds-skeleton-card\">\n      <div className=\"ds-skeleton-card-media\">\n        <AntSkeleton.Image active={active} />\n      </div>\n      <div className=\"ds-skeleton-card-body\">\n        <SkeletonLine active={active} width=\"48%\" strong />\n        <SkeletonLine active={active} width=\"92%\" />\n        <SkeletonLine active={active} width=\"78%\" />\n        <SkeletonLine active={active} width=\"64%\" />\n        <div className=\"ds-skeleton-card-action\">\n          <AntSkeleton.Button active={active} block shape={round ? 'round' : 'default'} size=\"small\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction renderForm(active: boolean, rowCount: number) {\n  return (\n    <div className=\"ds-skeleton-form\">\n      {createRange(rowCount).map((rowIndex) => (\n        <div className=\"ds-skeleton-form-row\" key={rowIndex}>\n          <SkeletonLine active={active} width={rowIndex % 2 === 0 ? '72%' : '58%'} strong />\n          <AntSkeleton.Input active={active} block className=\"ds-skeleton-form-control\" size=\"default\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderDetails(active: boolean, rowCount: number, columnCount: number) {\n  return (\n    <div className=\"ds-skeleton-details\" style={{ '--ds-skeleton-columns': columnCount } as CSSProperties}>\n      {createRange(rowCount).map((rowIndex) => (\n        <div className=\"ds-skeleton-details-row\" key={rowIndex}>\n          {createRange(columnCount).map((columnIndex) => (\n            <div className=\"ds-skeleton-details-cell\" key={columnIndex}>\n              <SkeletonLine active={active} width=\"44%\" strong />\n              <SkeletonLine active={active} width={(rowIndex + columnIndex) % 2 === 0 ? '82%' : '64%'} className=\"ds-skeleton-details-value\" />\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderList(active: boolean, round: boolean, rowCount: number) {\n  return (\n    <div className=\"ds-skeleton-list\">\n      {createRange(rowCount).map((rowIndex) => (\n        <div className=\"ds-skeleton-list-item\" key={rowIndex}>\n          <AntSkeleton.Avatar active={active} shape=\"circle\" />\n          <div className=\"ds-skeleton-list-copy\">\n            <SkeletonLine active={active} width={rowIndex % 2 === 0 ? '54%' : '68%'} strong />\n            <SkeletonLine active={active} width={rowIndex % 2 === 0 ? '82%' : '72%'} />\n          </div>\n          <div className=\"ds-skeleton-list-action\">\n            <AntSkeleton.Button active={active} block shape={round ? 'round' : 'default'} size=\"small\" />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderVariant(dsVariant: DSSkeletonVariant, active: boolean, round: boolean, rowCount: number, columnCount: number) {\n  if (dsVariant === 'table') return renderTable(active, rowCount, columnCount);\n  if (dsVariant === 'card') return renderCard(active, round);\n  if (dsVariant === 'form') return renderForm(active, rowCount);\n  if (dsVariant === 'details') return renderDetails(active, rowCount, columnCount);\n  return renderList(active, round, rowCount);\n}\n\nexport const Skeleton: DSSkeletonComponent = ({\n  active = true,\n  children,\n  className,\n  dsColumns,\n  dsRows,\n  dsVariant = 'table',\n  loading = true,\n  rootClassName,\n  round = true,\n  style,\n}: SkeletonProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  if (loading === false) {\n    return children ? <>{children}</> : null;\n  }\n\n  const rowCount = clampCount(dsRows, DEFAULT_ROWS[dsVariant], 1, 8);\n  const columnCount = clampCount(dsColumns, DEFAULT_COLUMNS[dsVariant], 1, 6);\n\n  return (\n    <div\n      aria-label=\"Loading\"\n      className={mergeClassNames(DS_SKELETON_CLASS, rootClassName, className)}\n      data-ds-skeleton-variant={dsVariant}\n      data-ds-skeleton-round={round ? 'true' : 'false'}\n      role=\"status\"\n      style={style}\n    >\n      {renderVariant(dsVariant, active, round, rowCount, columnCount)}\n    </div>\n  );\n};\n\nSkeleton.displayName = 'Skeleton';\nSkeleton.Button = AntSkeleton.Button;\nSkeleton.Avatar = AntSkeleton.Avatar;\nSkeleton.Input = AntSkeleton.Input;\nSkeleton.Image = AntSkeleton.Image;\nSkeleton.Node = AntSkeleton.Node;\n"],"mappings":"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"}

package/dist-lib/feedback/Skeleton.js

@@ -0,0 +1,408 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Skeleton as t } from "antd";
+import { useEffect as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/ds/feedback/Skeleton.tsx
+var o = "ds-skeleton-styles", s = "ds-skeleton", c = {
+	table: 4,
+	card: 1,
+	form: 4,
+	details: 4,
+	list: 4
+}, l = {
+	table: 4,
+	card: 1,
+	form: 1,
+	details: 2,
+	list: 1
+};
+function u(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function d(e, t, n, r) {
+	return e === void 0 || Number.isNaN(e) ? t : Math.min(Math.max(Math.round(e), n), r);
+}
+function f(e) {
+	return Array.from({ length: e }, (e, t) => t);
+}
+function p() {
+	if (typeof document > "u") return;
+	let { skeleton: t } = e, n = document.getElementById(o);
+	n || (n = document.createElement("style"), n.id = o, document.head.appendChild(n)), n.textContent = `
+    .${s} {
+      box-sizing: border-box;
+      width: 100%;
+      padding: ${t.spacing.shell};
+      border: 1px solid ${t.border.default};
+      border-radius: ${t.border.radius};
+      background: ${t.surface.default};
+      color: ${t.placeholder.base};
+      font-family: 'Nunito', sans-serif;
+      --ds-skeleton-placeholder: ${t.placeholder.base};
+      --ds-skeleton-placeholder-strong: ${t.placeholder.strong};
+      --ds-skeleton-highlight: ${t.placeholder.highlight};
+    }
+
+    .${s},
+    .${s} * {
+      box-sizing: border-box;
+    }
+
+    .${s} .ant-skeleton,
+    .${s} .ant-skeleton-element {
+      width: 100%;
+      display: block;
+    }
+
+    .${s} .ant-skeleton-input,
+    .${s} .ant-skeleton-button,
+    .${s} .ant-skeleton-avatar,
+    .${s} .ant-skeleton-image {
+      background-color: var(--ds-skeleton-placeholder) !important;
+    }
+
+    .${s} .ant-skeleton-input,
+    .${s} .ant-skeleton-button {
+      min-width: 0 !important;
+      width: 100% !important;
+      border-radius: ${t.border.radius} !important;
+    }
+
+    .${s} .ant-skeleton-avatar {
+      width: ${t.size.listAvatar}px !important;
+      height: ${t.size.listAvatar}px !important;
+      min-width: ${t.size.listAvatar}px !important;
+    }
+
+    .${s} .ant-skeleton-image {
+      width: 100% !important;
+      height: 100% !important;
+      border-radius: ${t.border.radius} !important;
+    }
+
+    .${s}[data-ds-skeleton-round='false'] .ant-skeleton-input,
+    .${s}[data-ds-skeleton-round='false'] .ant-skeleton-button,
+    .${s}[data-ds-skeleton-round='false'] .ant-skeleton-avatar,
+    .${s}[data-ds-skeleton-round='false'] .ant-skeleton-image {
+      border-radius: 0 !important;
+    }
+
+    .${s} .ds-skeleton-line .ant-skeleton-input,
+    .${s} .ds-skeleton-line.ant-skeleton-input {
+      height: 14px !important;
+    }
+
+    .ds-skeleton-line-strong .ant-skeleton-input,
+    .ds-skeleton-line-strong.ant-skeleton-input {
+      background-color: var(--ds-skeleton-placeholder-strong) !important;
+    }
+
+    .ds-skeleton-table {
+      display: flex;
+      flex-direction: column;
+      gap: ${t.spacing.compactRowGap};
+      background: ${t.surface.default};
+    }
+
+    .ds-skeleton-table-grid {
+      display: grid;
+      grid-template-columns: repeat(var(--ds-skeleton-columns), minmax(0, 1fr));
+      gap: 12px;
+      align-items: center;
+    }
+
+    .ds-skeleton-table-header {
+      min-height: ${t.size.tableHeader};
+      padding-bottom: 10px;
+      border-bottom: 1px solid ${t.border.default};
+    }
+
+    .ds-skeleton-table-row {
+      min-height: ${t.size.tableRow};
+      padding: 8px 0;
+      border-bottom: 1px solid ${t.border.default};
+    }
+
+    .ds-skeleton-table-row:last-child {
+      border-bottom: 0;
+    }
+
+    .ds-skeleton-card {
+      display: grid;
+      grid-template-columns: minmax(128px, 32%) minmax(0, 1fr);
+      gap: 16px;
+      align-items: stretch;
+      background: ${t.surface.default};
+    }
+
+    .ds-skeleton-card-media {
+      min-height: ${t.size.cardMedia};
+    }
+
+    .ds-skeleton-card-body,
+    .ds-skeleton-form,
+    .ds-skeleton-details,
+    .ds-skeleton-list {
+      display: flex;
+      flex-direction: column;
+      gap: ${t.spacing.rowGap};
+    }
+
+    .ds-skeleton-card-action {
+      width: 132px;
+      max-width: 48%;
+      margin-top: 6px;
+    }
+
+    .ds-skeleton-form-row {
+      display: grid;
+      grid-template-columns: minmax(112px, 24%) minmax(0, 1fr);
+      gap: 12px;
+      align-items: center;
+    }
+
+    .ds-skeleton-form-control .ant-skeleton-input,
+    .ds-skeleton-form-control.ant-skeleton-input {
+      height: ${t.size.formInput} !important;
+    }
+
+    .ds-skeleton-details {
+      padding: 0;
+    }
+
+    .ds-skeleton-details-row {
+      display: grid;
+      grid-template-columns: repeat(var(--ds-skeleton-columns), minmax(0, 1fr));
+      gap: 16px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid ${t.border.default};
+    }
+
+    .ds-skeleton-details-row:last-child {
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    .ds-skeleton-details-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .ds-skeleton-details-value .ant-skeleton-input,
+    .ds-skeleton-details-value.ant-skeleton-input {
+      height: ${t.size.detailsValue} !important;
+    }
+
+    .ds-skeleton-list-item {
+      display: grid;
+      grid-template-columns: ${t.size.listAvatar}px minmax(0, 1fr) 92px;
+      gap: 12px;
+      align-items: center;
+      min-height: 54px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid ${t.border.default};
+    }
+
+    .ds-skeleton-list-item:last-child {
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    .ds-skeleton-list-copy {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .ds-skeleton-list-action {
+      min-width: 0;
+    }
+
+    @media (max-width: 640px) {
+      .${s} {
+        padding: ${t.spacing.compactShell};
+      }
+
+      .ds-skeleton-card,
+      .ds-skeleton-form-row,
+      .ds-skeleton-list-item {
+        grid-template-columns: 1fr;
+      }
+
+      .ds-skeleton-card-media {
+        min-height: 96px;
+      }
+
+      .ds-skeleton-list-action {
+        width: 50%;
+      }
+    }
+  `;
+}
+function m({ active: e, width: n, strong: r, className: a }) {
+	return /* @__PURE__ */ i(t.Input, {
+		active: e,
+		block: !0,
+		className: u("ds-skeleton-line", r ? "ds-skeleton-line-strong" : void 0, a),
+		size: "small",
+		style: { width: n }
+	});
+}
+function h(e, t, n) {
+	return /* @__PURE__ */ a("div", {
+		className: "ds-skeleton-table",
+		style: { "--ds-skeleton-columns": n },
+		children: [/* @__PURE__ */ i("div", {
+			className: "ds-skeleton-table-grid ds-skeleton-table-header",
+			children: f(n).map((t) => /* @__PURE__ */ i(m, {
+				active: e,
+				width: t === n - 1 ? "56%" : "72%",
+				strong: !0
+			}, t))
+		}), f(t).map((t) => /* @__PURE__ */ i("div", {
+			className: "ds-skeleton-table-grid ds-skeleton-table-row",
+			children: f(n).map((t) => /* @__PURE__ */ i(m, {
+				active: e,
+				width: t === 0 ? "84%" : t === n - 1 ? "48%" : "68%"
+			}, t))
+		}, t))]
+	});
+}
+function g(e, n) {
+	return /* @__PURE__ */ a("div", {
+		className: "ds-skeleton-card",
+		children: [/* @__PURE__ */ i("div", {
+			className: "ds-skeleton-card-media",
+			children: /* @__PURE__ */ i(t.Image, { active: e })
+		}), /* @__PURE__ */ a("div", {
+			className: "ds-skeleton-card-body",
+			children: [
+				/* @__PURE__ */ i(m, {
+					active: e,
+					width: "48%",
+					strong: !0
+				}),
+				/* @__PURE__ */ i(m, {
+					active: e,
+					width: "92%"
+				}),
+				/* @__PURE__ */ i(m, {
+					active: e,
+					width: "78%"
+				}),
+				/* @__PURE__ */ i(m, {
+					active: e,
+					width: "64%"
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "ds-skeleton-card-action",
+					children: /* @__PURE__ */ i(t.Button, {
+						active: e,
+						block: !0,
+						shape: n ? "round" : "default",
+						size: "small"
+					})
+				})
+			]
+		})]
+	});
+}
+function _(e, n) {
+	return /* @__PURE__ */ i("div", {
+		className: "ds-skeleton-form",
+		children: f(n).map((n) => /* @__PURE__ */ a("div", {
+			className: "ds-skeleton-form-row",
+			children: [/* @__PURE__ */ i(m, {
+				active: e,
+				width: n % 2 == 0 ? "72%" : "58%",
+				strong: !0
+			}), /* @__PURE__ */ i(t.Input, {
+				active: e,
+				block: !0,
+				className: "ds-skeleton-form-control",
+				size: "default"
+			})]
+		}, n))
+	});
+}
+function v(e, t, n) {
+	return /* @__PURE__ */ i("div", {
+		className: "ds-skeleton-details",
+		style: { "--ds-skeleton-columns": n },
+		children: f(t).map((t) => /* @__PURE__ */ i("div", {
+			className: "ds-skeleton-details-row",
+			children: f(n).map((n) => /* @__PURE__ */ a("div", {
+				className: "ds-skeleton-details-cell",
+				children: [/* @__PURE__ */ i(m, {
+					active: e,
+					width: "44%",
+					strong: !0
+				}), /* @__PURE__ */ i(m, {
+					active: e,
+					width: (t + n) % 2 == 0 ? "82%" : "64%",
+					className: "ds-skeleton-details-value"
+				})]
+			}, n))
+		}, t))
+	});
+}
+function y(e, n, r) {
+	return /* @__PURE__ */ i("div", {
+		className: "ds-skeleton-list",
+		children: f(r).map((r) => /* @__PURE__ */ a("div", {
+			className: "ds-skeleton-list-item",
+			children: [
+				/* @__PURE__ */ i(t.Avatar, {
+					active: e,
+					shape: "circle"
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "ds-skeleton-list-copy",
+					children: [/* @__PURE__ */ i(m, {
+						active: e,
+						width: r % 2 == 0 ? "54%" : "68%",
+						strong: !0
+					}), /* @__PURE__ */ i(m, {
+						active: e,
+						width: r % 2 == 0 ? "82%" : "72%"
+					})]
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "ds-skeleton-list-action",
+					children: /* @__PURE__ */ i(t.Button, {
+						active: e,
+						block: !0,
+						shape: n ? "round" : "default",
+						size: "small"
+					})
+				})
+			]
+		}, r))
+	});
+}
+function b(e, t, n, r, i) {
+	return e === "table" ? h(t, r, i) : e === "card" ? g(t, n) : e === "form" ? _(t, r) : e === "details" ? v(t, r, i) : y(t, n, r);
+}
+var x = ({ active: e = !0, children: t, className: a, dsColumns: o, dsRows: f, dsVariant: m = "table", loading: h = !0, rootClassName: g, round: _ = !0, style: v }) => {
+	if (n(() => {
+		p();
+	}, []), h === !1) return t ? /* @__PURE__ */ i(r, { children: t }) : null;
+	let y = d(f, c[m], 1, 8), x = d(o, l[m], 1, 6);
+	return /* @__PURE__ */ i("div", {
+		"aria-label": "Loading",
+		className: u(s, g, a),
+		"data-ds-skeleton-variant": m,
+		"data-ds-skeleton-round": _ ? "true" : "false",
+		role: "status",
+		style: v,
+		children: b(m, e, _, y, x)
+	});
+};
+x.displayName = "Skeleton", x.Button = t.Button, x.Avatar = t.Avatar, x.Input = t.Input, x.Image = t.Image, x.Node = t.Node;
+//#endregion
+export { x as Skeleton };
+
+//# sourceMappingURL=Skeleton.js.map