@once-ui-system/core 1.8.3 → 2.0.0-alpha.0

package/ai/components/SettingAxes.json

@@ -0,0 +1,127 @@
+{
+ "name": "SettingAxes",
+ "group": "components",
+ "extends": [
+  "Flex"
+ ],
+ "mixins": [
+  "CommonProps",
+  "DisplayProps",
+  "FlexProps",
+  "SizeProps",
+  "SpacingProps",
+  "StyleProps"
+ ],
+ "props": {
+  "label": "React.ReactNode",
+  "info": "React.ReactNode",
+  "axes": "!{ label: React.ReactNode; control: React.ReactNode }[]",
+  "axisWidth": "number = 13"
+ },
+ "mixinsRef": [
+  "CommonProps",
+  "DisplayProps",
+  "FlexProps",
+  "SizeProps",
+  "SpacingProps",
+  "StyleProps"
+ ],
+ "tokensRef": "see spec.json mixins",
+ "resolvedMixins": {
+  "CommonProps": {
+   "onBackground": "Colors",
+   "onSolid": "Colors",
+   "align": "CSSProperties[\"textAlign\"]"
+  },
+  "DisplayProps": {
+   "as": "ElementType",
+   "inline": "boolean",
+   "hide": "boolean",
+   "pointerEvents": "\"none\" | \"all\" | \"auto\"",
+   "position": "CSSProperties[\"position\"]",
+   "overflow": "CSSProperties[\"overflow\"]",
+   "overflowX": "CSSProperties[\"overflowX\"]",
+   "overflowY": "CSSProperties[\"overflowY\"]",
+   "scrollbar": "\"default\" | \"minimal\"",
+   "transition": "\"micro-short\" | \"micro-medium\" | \"micro-long\" | \"macro-short\" | \"macro-medium\" | \"macro-long\"",
+   "opacity": "Opacity",
+   "zIndex": "-1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | \"-1\" | \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\"",
+   "dark": "boolean",
+   "light": "boolean"
+  },
+  "FlexProps": {
+   "direction": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"",
+   "horizontal": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"even\" | \"stretch\"",
+   "vertical": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"even\" | \"stretch\"",
+   "center": "boolean",
+   "wrap": "boolean",
+   "flex": "FlexValue"
+  },
+  "SizeProps": {
+   "width": "number | SpacingToken | CSSUnit",
+   "height": "number | SpacingToken | CSSUnit",
+   "maxWidth": "number | SpacingToken | CSSUnit",
+   "minWidth": "number | SpacingToken | CSSUnit",
+   "minHeight": "number | SpacingToken | CSSUnit",
+   "maxHeight": "number | SpacingToken | CSSUnit",
+   "fit": "boolean",
+   "fitWidth": "boolean",
+   "fitHeight": "boolean",
+   "fill": "boolean",
+   "fillWidth": "boolean",
+   "fillHeight": "boolean",
+   "aspectRatio": "CSSProperties[\"aspectRatio\"]"
+  },
+  "SpacingProps": {
+   "padding": "SpacingToken | number",
+   "paddingLeft": "SpacingToken | number",
+   "paddingRight": "SpacingToken | number",
+   "paddingTop": "SpacingToken | number",
+   "paddingBottom": "SpacingToken | number",
+   "paddingX": "SpacingToken | number",
+   "paddingY": "SpacingToken | number",
+   "margin": "SpacingToken | number",
+   "marginLeft": "SpacingToken | number",
+   "marginRight": "SpacingToken | number",
+   "marginTop": "SpacingToken | number",
+   "marginBottom": "SpacingToken | number",
+   "marginX": "SpacingToken | number",
+   "marginY": "SpacingToken | number",
+   "gap": "SpacingToken | number | \"-1\"",
+   "top": "SpacingToken | number | CSSUnit",
+   "right": "SpacingToken | number | CSSUnit",
+   "bottom": "SpacingToken | number | CSSUnit",
+   "left": "SpacingToken | number | CSSUnit",
+   "translateX": "SpacingToken | number | CSSUnit",
+   "translateY": "SpacingToken | number | CSSUnit"
+  },
+  "StyleProps": {
+   "textVariant": "TextVariant",
+   "textSize": "TextSize",
+   "textType": "TextType",
+   "textWeight": "TextWeight",
+   "background": "Colors | \"surface\" | \"overlay\" | \"page\" | \"transparent\"",
+   "solid": "Colors",
+   "borderTop": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderRight": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderBottom": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderLeft": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderX": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderY": "Colors | \"surface\" | \"transparent\" | boolean",
+   "border": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderStyle": "\"solid\" | \"dashed\"",
+   "borderWidth": "1 | 2 | 4 | 8 | \"1\" | \"2\" | \"4\" | \"8\"",
+   "topRadius": "RadiusSize",
+   "rightRadius": "RadiusSize",
+   "bottomRadius": "RadiusSize",
+   "leftRadius": "RadiusSize",
+   "topLeftRadius": "RadiusSize",
+   "topRightRadius": "RadiusSize",
+   "bottomLeftRadius": "RadiusSize",
+   "bottomRightRadius": "RadiusSize",
+   "shadow": "ShadowSize",
+   "cursor": "CSSProperties[\"cursor\"] | \"interactive\" | ReactNode",
+   "radius": "RadiusSize | `${RadiusSize}-${RadiusNest}`"
+  }
+ }
+}

package/ai/components/SettingGroup.json

@@ -0,0 +1,129 @@
+{
+ "name": "SettingGroup",
+ "group": "components",
+ "extends": [
+  "Flex"
+ ],
+ "mixins": [
+  "CommonProps",
+  "DisplayProps",
+  "FlexProps",
+  "SizeProps",
+  "SpacingProps",
+  "StyleProps"
+ ],
+ "props": {
+  "label": "React.ReactNode",
+  "description": "React.ReactNode",
+  "info": "React.ReactNode",
+  "control": "React.ReactNode",
+  "open": "boolean",
+  "children": "React.ReactNode"
+ },
+ "mixinsRef": [
+  "CommonProps",
+  "DisplayProps",
+  "FlexProps",
+  "SizeProps",
+  "SpacingProps",
+  "StyleProps"
+ ],
+ "tokensRef": "see spec.json mixins",
+ "resolvedMixins": {
+  "CommonProps": {
+   "onBackground": "Colors",
+   "onSolid": "Colors",
+   "align": "CSSProperties[\"textAlign\"]"
+  },
+  "DisplayProps": {
+   "as": "ElementType",
+   "inline": "boolean",
+   "hide": "boolean",
+   "pointerEvents": "\"none\" | \"all\" | \"auto\"",
+   "position": "CSSProperties[\"position\"]",
+   "overflow": "CSSProperties[\"overflow\"]",
+   "overflowX": "CSSProperties[\"overflowX\"]",
+   "overflowY": "CSSProperties[\"overflowY\"]",
+   "scrollbar": "\"default\" | \"minimal\"",
+   "transition": "\"micro-short\" | \"micro-medium\" | \"micro-long\" | \"macro-short\" | \"macro-medium\" | \"macro-long\"",
+   "opacity": "Opacity",
+   "zIndex": "-1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | \"-1\" | \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\"",
+   "dark": "boolean",
+   "light": "boolean"
+  },
+  "FlexProps": {
+   "direction": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"",
+   "horizontal": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"even\" | \"stretch\"",
+   "vertical": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"even\" | \"stretch\"",
+   "center": "boolean",
+   "wrap": "boolean",
+   "flex": "FlexValue"
+  },
+  "SizeProps": {
+   "width": "number | SpacingToken | CSSUnit",
+   "height": "number | SpacingToken | CSSUnit",
+   "maxWidth": "number | SpacingToken | CSSUnit",
+   "minWidth": "number | SpacingToken | CSSUnit",
+   "minHeight": "number | SpacingToken | CSSUnit",
+   "maxHeight": "number | SpacingToken | CSSUnit",
+   "fit": "boolean",
+   "fitWidth": "boolean",
+   "fitHeight": "boolean",
+   "fill": "boolean",
+   "fillWidth": "boolean",
+   "fillHeight": "boolean",
+   "aspectRatio": "CSSProperties[\"aspectRatio\"]"
+  },
+  "SpacingProps": {
+   "padding": "SpacingToken | number",
+   "paddingLeft": "SpacingToken | number",
+   "paddingRight": "SpacingToken | number",
+   "paddingTop": "SpacingToken | number",
+   "paddingBottom": "SpacingToken | number",
+   "paddingX": "SpacingToken | number",
+   "paddingY": "SpacingToken | number",
+   "margin": "SpacingToken | number",
+   "marginLeft": "SpacingToken | number",
+   "marginRight": "SpacingToken | number",
+   "marginTop": "SpacingToken | number",
+   "marginBottom": "SpacingToken | number",
+   "marginX": "SpacingToken | number",
+   "marginY": "SpacingToken | number",
+   "gap": "SpacingToken | number | \"-1\"",
+   "top": "SpacingToken | number | CSSUnit",
+   "right": "SpacingToken | number | CSSUnit",
+   "bottom": "SpacingToken | number | CSSUnit",
+   "left": "SpacingToken | number | CSSUnit",
+   "translateX": "SpacingToken | number | CSSUnit",
+   "translateY": "SpacingToken | number | CSSUnit"
+  },
+  "StyleProps": {
+   "textVariant": "TextVariant",
+   "textSize": "TextSize",
+   "textType": "TextType",
+   "textWeight": "TextWeight",
+   "background": "Colors | \"surface\" | \"overlay\" | \"page\" | \"transparent\"",
+   "solid": "Colors",
+   "borderTop": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderRight": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderBottom": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderLeft": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderX": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderY": "Colors | \"surface\" | \"transparent\" | boolean",
+   "border": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderStyle": "\"solid\" | \"dashed\"",
+   "borderWidth": "1 | 2 | 4 | 8 | \"1\" | \"2\" | \"4\" | \"8\"",
+   "topRadius": "RadiusSize",
+   "rightRadius": "RadiusSize",
+   "bottomRadius": "RadiusSize",
+   "leftRadius": "RadiusSize",
+   "topLeftRadius": "RadiusSize",
+   "topRightRadius": "RadiusSize",
+   "bottomLeftRadius": "RadiusSize",
+   "bottomRightRadius": "RadiusSize",
+   "shadow": "ShadowSize",
+   "cursor": "CSSProperties[\"cursor\"] | \"interactive\" | ReactNode",
+   "radius": "RadiusSize | `${RadiusSize}-${RadiusNest}`"
+  }
+ }
+}

package/ai/components/ShineFx.json

@@ -8,7 +8,7 @@
   "TextProps"
  ],
  "props": {
-  "speed": "number = 1",
+  "speed": "number = 1000",
   "disabled": "boolean = false",
   "inverse": "boolean = false",
   "baseOpacity": "number = 0.3",

package/ai/components/Skeleton.json

@@ -14,9 +14,8 @@
  ],
  "props": {
   "shape": "!\"line\" | \"circle\" | \"block\" = line",
-  "width": "\"xl\" | \"l\" | \"m\" | \"s\" | \"xs\" = m",
-  "height": "\"xl\" | \"l\" | \"m\" | \"s\" | \"xs\" = m",
-  "delay": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\"",
+  "size": "\"xl\" | \"l\" | \"m\" | \"s\" | \"xs\" = m",
+  "delay": "number",
   "style": "React.CSSProperties",
   "className": "string"
  },

package/ai/components/SplitView.json

@@ -16,6 +16,8 @@
  "props": {
   "leftPanel": "!ReactNode",
   "rightPanel": "!ReactNode",
+  "labels": "{ left: string; right: string }",
+  "collapseBelow": "BreakpointKey | false = s",
   "defaultSplit": "number = 0.3",
   "minSplit": "number = 0.2",
   "maxSplit": "number = 0.8"

package/ai/components/StylePanel.json

@@ -2,6 +2,7 @@
  "name": "StylePanel",
  "group": "components",
  "extends": [
+  "Column",
   "Flex"
  ],
  "mixins": [
@@ -13,8 +14,9 @@
   "StyleProps"
  ],
  "props": {
-  "style": "React.CSSProperties",
-  "className": "string"
+  "visibility": "StylePanelVisibility",
+  "value": "StylePanelRootProps[\"value\"]",
+  "onChange": "StylePanelRootProps[\"onChange\"]"
  },
  "mixinsRef": [
   "CommonProps",

package/ai/components/Swatch.json

@@ -0,0 +1,11 @@
+{
+ "name": "Swatch",
+ "group": "data",
+ "importFrom": "@once-ui-system/core/data",
+ "props": {
+  "color": "!string",
+  "size": "\"s\" | \"m\" = m",
+  "variant": "ChartVariant = useDataTheme().variant"
+ },
+ "mixinsRef": []
+}

package/ai/components/Swiper.json

@@ -16,7 +16,7 @@
   "items": "!SwiperItem[] = []",
   "controls": "boolean | \"contained\" = true",
   "priority": "boolean = false",
-  "fill": "boolean = false",
+  "stretch": "boolean = false",
   "aspectRatio": "string = 16 / 9",
   "sizes": "string",
   "unoptimized": "boolean = false",

package/ai/components/Switch.json

@@ -7,7 +7,7 @@
  "props": {
   "style": "React.CSSProperties",
   "className": "string",
-  "isChecked": "!boolean",
+  "checked": "!boolean",
   "loading": "boolean = false",
   "name": "string",
   "value": "string",

package/ai/components/Tag.json

@@ -13,7 +13,7 @@
   "StyleProps"
  ],
  "props": {
-  "variant": "ColorScheme | \"gradient\" = neutral",
+  "scheme": "ColorScheme | \"gradient\" = neutral",
   "size": "CondensedTShirtSizes = m",
   "label": "string = ",
   "prefixIcon": "IconName",

package/ai/components/Textarea.json

@@ -5,16 +5,17 @@
   "id": "!string",
   "label": "string",
   "placeholder": "string",
-  "lines": "number | \"auto\" = 3",
-  "height": "TShirtSizes = m",
+  "lines": "number | \"auto\" = auto",
+  "size": "TShirtSizes = m",
   "error": "boolean = false",
   "errorMessage": "ReactNode",
   "description": "ReactNode",
-  "radius": "\"none\" | \"top\" | \"right\" | \"bottom\" | \"left\" | \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\"",
+  "corners": "\"none\" | \"top\" | \"right\" | \"bottom\" | \"left\" | \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\"",
   "className": "string",
-  "hasPrefix": "ReactNode",
-  "hasSuffix": "ReactNode",
+  "prefix": "ReactNode",
+  "suffix": "ReactNode",
   "variant": "\"default\" | \"ghost\" = default",
+  "focusRing": "boolean = false",
   "characterCount": "boolean",
   "resize": "\"horizontal\" | \"vertical\" | \"both\" | \"none\" = vertical",
   "validate": "(value: ReactNode) => ReactNode | null",

package/ai/components/ThemeSwitcher.json

@@ -13,6 +13,9 @@
   "SpacingProps",
   "StyleProps"
  ],
+ "props": {
+  "collapsed": "boolean"
+ },
  "mixinsRef": [
   "CommonProps",
   "DisplayProps",

package/ai/components/Toast.json

@@ -4,7 +4,7 @@
  "props": {
   "className": "string",
   "variant": "!\"success\" | \"danger\" | \"warning\" | \"info\"",
-  "icon": "boolean = true",
+  "showIcon": "boolean = true",
   "onClose": "() => void",
   "action": "React.ReactNode",
   "children": "!React.ReactNode"

package/ai/components/ToggleButton.json

@@ -6,7 +6,8 @@
   "selected": "boolean = false",
   "variant": "\"ghost\" | \"outline\" | \"subtle\" = ghost",
   "size": "TShirtSizes = m",
-  "radius": "\"none\" | \"top\" | \"right\" | \"bottom\" | \"left\" | \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\"",
+  "radius": "RadiusSize",
+  "corners": "\"none\" | \"top\" | \"right\" | \"bottom\" | \"left\" | \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\"",
   "rounded": "boolean = false",
   "horizontal": "\"start\" | \"center\" | \"end\" | \"between\" = center",
   "fillWidth": "boolean = false",

package/ai/eval-tasks.md

@@ -69,3 +69,11 @@ Record every recurring failure here; each entry should become a rule in
 | 2026-06-12 | Invented icon names (`more`, `bell`, `arrowRight`) | rules.md #14b, IconName list in spec.json |
 | 2026-06-12 | `Badge title` + children rendered same text twice ("2 unread2") | rules.md #14c |
 | 2026-06-12 | `Fade` wrapped the whole message list → washed-out content | rules.md #14d |
+| 2026-09-13 | `gotchas.json` still said `RevealFx.delay` is seconds after 2.0 made it ms — and the task bundles point at it, so an agent trusting the bundle got the wrong answer | `gotchas.json` `RevealFx.delay` |
+| 2026-09-13 | `bell` and `arrowRight` named as non-existent icons; both are registered. Reversed from the 06-12 entry above — the registry grew, the prose didn't | rules.md #14b, `gotchas.json` `Icon.names` |
+| 2026-09-13 | `Dashboard1.tsx` shipped `icon: "chat" as IconName` — unregistered, and the cast defeats the 2.0 union that would have caught it. No chat/comment icon exists | Dashboard1 uses `edit`; #14b names the gap |
+| 2026-09-13 | Gold `examples/pricing.tsx` imported `AccordionGroup` and never rendered it, leaving the FAQ component of the FAQ task with no call site to copy | import removed; `AccordionItem` shape still undocumented |
+| 2026-09-13 | Gold `examples/dashboard.tsx` used `style={{ cursor: "pointer" }}` on a `Text` — the exact defect the checklist scores, in the file agents copy | now a `Button variant="tertiary"` |
+| 2026-09-13 | rules.md #4's spacing list stopped at `"64"` while #17 requires `"80"`–`"160"` | #4 lists the full `SpacingToken` scale |
+| 2026-09-13 | rules.md #14 listed 4 Button variants; the slice has 10 | #14 matches the slice |
+| 2026-09-13 | **Open:** `LineChart`, `BarChart`, `MediaUpload` and `CodeBlock` have `props: {}` and extend `*.impl` / `interfaces`, neither of which the spec defines — the whole chart and upload API is invisible to the harness, and `BarChart` has no example either. Agents extrapolate or fall back | generator change, not yet made |

package/ai/examples/app-shell.tsx

@@ -0,0 +1,111 @@
+/**
+ * The three shells from `ai/layouts.md`, as code that compiles.
+ *
+ * A recipe nobody ever ran is a suggestion. These live here so `pnpm typecheck`
+ * covers them: if a prop is renamed or a component changes shape, the recipe
+ * fails with everything else rather than going quietly stale in a markdown file.
+ *
+ * Read `ai/layouts.md` for what each decision is for — the scrolling pane, the
+ * sticky offset, why nav selection needs the longest match rather than an
+ * equality check.
+ */
+import {
+  Column, Row, SplitView, Scrubber, NavGroup, NavItem, selectNavHref,
+} from "@once-ui-system/core";
+import type { IconName } from "@once-ui-system/core";
+
+const Header = () => <Row height="56" fillWidth />;
+const Sidebar = (p: React.ComponentProps<typeof Column>) => <Column {...p} />;
+
+export const Shell = ({ children }: { children: React.ReactNode }) => (
+  <Column fill horizontal="center" flex={1}>
+    <Header />
+    <Row fill paddingX="8">
+      <Sidebar s={{ hide: true }} maxWidth={18} fitHeight position="sticky" top="56" />
+      <Row fill horizontal="center" topRadius="l" overflow="hidden">
+        <Row
+          height="calc(100dvh - var(--static-space-56))"
+          overflowY="auto"
+          topRadius="l"
+          horizontal="center"
+          fillWidth
+          background="surface">
+          <Column maxWidth="xl" gap="m" paddingY="32" fitHeight>
+            {children}
+          </Column>
+        </Row>
+      </Row>
+    </Row>
+  </Column>
+);
+
+type Sub = { href: string; label: string; badge?: number };
+type Item = { key: string; label: string; icon?: IconName; href?: string; items?: Sub[] };
+
+export const Nav = ({ nav, pathname }: { nav: Item[]; pathname: string }) => {
+  const current = selectNavHref(
+    pathname,
+    nav.flatMap((i) => (i.items ? i.items.map((s) => s.href) : [i.href!])),
+  );
+  return (
+    <Column fill gap="4" paddingX="8">
+      {nav.map((item) =>
+        item.items ? (
+          <NavGroup
+            key={item.key}
+            label={item.label}
+            icon={item.icon}
+            defaultOpen={item.items.some((s) => s.href === current)}>
+            {item.items.map((sub) => (
+              <NavItem
+                key={sub.href}
+                href={sub.href}
+                label={sub.label}
+                badge={sub.badge}
+                selected={sub.href === current}
+              />
+            ))}
+          </NavGroup>
+        ) : (
+          <NavItem
+            key={item.href}
+            href={item.href}
+            icon={item.icon}
+            label={item.label}
+            selected={item.href === current}
+          />
+        ),
+      )}
+    </Column>
+  );
+};
+
+export const Editor = ({
+  duration, time, setTime, tracks, pause,
+}: {
+  duration: number;
+  time: number;
+  setTime: (t: number) => void;
+  tracks: React.ComponentProps<typeof Scrubber>["tracks"];
+  pause: () => void;
+}) => (
+  <Column fill>
+    <SplitView
+      fill
+      leftPanel={<Column fill overflowY="auto" />}
+      rightPanel={<Column fill overflowY="auto" />}
+      defaultSplit={0.28}
+      minSplit={0.2}
+      maxSplit={0.6}
+      collapseBelow="s"
+      labels={{ left: "Layers", right: "Canvas" }}
+    />
+    <Scrubber
+      duration={duration}
+      value={time}
+      onChange={setTime}
+      tracks={tracks}
+      onGestureStart={pause}
+    />
+  </Column>
+);

package/ai/examples/auth.tsx

@@ -33,7 +33,7 @@ export function AuthExample() {
       >
         <Column minHeight={40} s={{ hide: true }}>
           <Media
-            fill
+            stretch
             fillHeight
             aspectRatio="4 / 5"
             src="/images/cover.jpg"

package/ai/examples/blocks/Dashboard1.tsx

@@ -1,20 +1,9 @@
 "use client";
 
 import React from "react";
-import {
-  Column,
-  Row,
-  Card,
-  Heading,
-  Text,
-  Grid,
-  Avatar,
-  Button,
-  Scroller,
-  StatusIndicator,
-  Icon,
-  LineChart
-} from "@once-ui-system/core";
+import { Column, Row, Card, Heading, Text, Grid, Avatar, Button, Scroller, StatusIndicator, Icon } from "@once-ui-system/core";
+import type { IconName } from "@once-ui-system/core";
+import { LineChart } from "@once-ui-system/core/data";
 import { Sidebar1 } from "./Sidebar1";
 import { Header1 } from "./Header1";
 import { Table1 } from "./Table1";
@@ -89,7 +78,7 @@ interface ActivityItemProps {
   action: string;
   time: string;
   href?: string;
-  icon: string;
+  icon: IconName;
 }
 
 const ActivityItem: React.FC<ActivityItemProps> = ({ avatar, action, time, href, icon }) => (
@@ -117,7 +106,7 @@ interface StatusItemProps {
   name: string;
   status: string;
   href?: string;
-  icon: string;
+  icon: IconName;
 }
 
 const StatusItem: React.FC<StatusItemProps> = ({ name, status, icon, href = "#" }) => (
@@ -308,12 +297,12 @@ export const Dashboard1: React.FC = () => {
                     
                     <Column fillWidth border="neutral-alpha-weak" topRadius="l" overflowY="auto">
                       {[
-                        { name: "Mobile App Development", status: "At Risk", icon: "code" },
-                        { name: "Marketing Campaign", status: "On Track", icon: "sparkle" },
-                        { name: "Database Migration", status: "On Track", icon: "code" },
-                        { name: "Website Redesign", status: "On Track", icon: "sparkle" },
-                        { name: "Product Launch", status: "Delayed", icon: "sparkle" },
-                        { name: "Server Upgrade", status: "Delayed", icon: "code" },
+                        { name: "Mobile App Development", status: "At Risk", icon: "code" as IconName },
+                        { name: "Marketing Campaign", status: "On Track", icon: "sparkle" as IconName },
+                        { name: "Database Migration", status: "On Track", icon: "code" as IconName },
+                        { name: "Website Redesign", status: "On Track", icon: "sparkle" as IconName },
+                        { name: "Product Launch", status: "Delayed", icon: "sparkle" as IconName },
+                        { name: "Server Upgrade", status: "Delayed", icon: "code" as IconName },
                       ].map((project, index) => (
                         <StatusItem
                           key={index}
@@ -340,37 +329,37 @@ export const Dashboard1: React.FC = () => {
                           avatar: "/images/creators/lorant.jpg",
                           action: "Completed the Website Redesign task",
                           time: "2 hours ago",
-                          icon: "check"
+                          icon: "check" as IconName
                         },
                         {
                           avatar: "/images/creators/vincent.jpg",
                           action: "Commented on Mobile App Development",
                           time: "4 hours ago",
-                          icon: "chat"
+                          icon: "edit" as IconName
                         },
                         {
                           avatar: "/images/creators/zsofia.jpg",
                           action: "Created a new task in Marketing Campaign",
                           time: "Yesterday",
-                          icon: "plus"
+                          icon: "plus" as IconName
                         },
                         {
                           avatar: "/images/creators/texz.jpg",
                           action: "Completed 3 tasks in Product Launch",
                           time: "Yesterday",
-                          icon: "check"
+                          icon: "check" as IconName
                         },
                         {
                           avatar: "/images/creators/justin.jpg",
                           action: "Created a new task in Marketing Campaign",
                           time: "2 days ago",
-                          icon: "plus"
+                          icon: "plus" as IconName
                         },
                         {
                           avatar: "/images/creators/zsofia.jpg",
                           action: "Completed 3 tasks in Product Launch",
                           time: "4 days ago",
-                          icon: "check"
+                          icon: "check" as IconName
                         }
                       ].map((activity, index) => (
                         <ActivityItem