@dust-tt/sparkle 0.2.617 → 0.2.618

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/esm/components/NavigationList.d.ts +1 -0
  3. package/dist/esm/components/NavigationList.d.ts.map +1 -1
  4. package/dist/esm/components/NavigationList.js +14 -2
  5. package/dist/esm/components/NavigationList.js.map +1 -1
  6. package/dist/esm/icons/actions/Atom.d.ts +5 -0
  7. package/dist/esm/icons/actions/Atom.d.ts.map +1 -0
  8. package/dist/esm/icons/actions/Atom.js +6 -0
  9. package/dist/esm/icons/actions/Atom.js.map +1 -0
  10. package/dist/esm/icons/actions/index.d.ts +1 -0
  11. package/dist/esm/icons/actions/index.d.ts.map +1 -1
  12. package/dist/esm/icons/actions/index.js +1 -0
  13. package/dist/esm/icons/actions/index.js.map +1 -1
  14. package/dist/esm/icons/app/Atom.d.ts +5 -0
  15. package/dist/esm/icons/app/Atom.d.ts.map +1 -0
  16. package/dist/esm/icons/app/Atom.js +6 -0
  17. package/dist/esm/icons/app/Atom.js.map +1 -0
  18. package/dist/esm/icons/app/Telescope.d.ts.map +1 -1
  19. package/dist/esm/icons/app/Telescope.js +1 -1
  20. package/dist/esm/icons/app/Telescope.js.map +1 -1
  21. package/dist/esm/icons/app/Tools.d.ts +5 -0
  22. package/dist/esm/icons/app/Tools.d.ts.map +1 -0
  23. package/dist/esm/icons/app/Tools.js +6 -0
  24. package/dist/esm/icons/app/Tools.js.map +1 -0
  25. package/dist/esm/icons/app/index.d.ts +2 -0
  26. package/dist/esm/icons/app/index.d.ts.map +1 -1
  27. package/dist/esm/icons/app/index.js +2 -0
  28. package/dist/esm/icons/app/index.js.map +1 -1
  29. package/dist/esm/icons/src/actions/atom.svg +3 -0
  30. package/dist/esm/icons/src/app/atom.svg +3 -0
  31. package/dist/esm/icons/src/app/telescope.svg +1 -1
  32. package/dist/esm/icons/src/app/tools.svg +3 -0
  33. package/dist/esm/stories/NavigationList.stories.d.ts.map +1 -1
  34. package/dist/esm/stories/NavigationList.stories.js +23 -3
  35. package/dist/esm/stories/NavigationList.stories.js.map +1 -1
  36. package/package.json +1 -1
  37. package/src/components/NavigationList.tsx +23 -0
  38. package/src/icons/actions/Atom.tsx +20 -0
  39. package/src/icons/actions/index.ts +1 -0
  40. package/src/icons/app/Atom.tsx +20 -0
  41. package/src/icons/app/Telescope.tsx +3 -1
  42. package/src/icons/app/Tools.tsx +18 -0
  43. package/src/icons/app/index.ts +2 -0
  44. package/src/icons/src/actions/atom.svg +3 -0
  45. package/src/icons/src/app/atom.svg +3 -0
  46. package/src/icons/src/app/telescope.svg +1 -1
  47. package/src/icons/src/app/tools.svg +3 -0
  48. package/src/stories/NavigationList.stories.tsx +22 -3
package/src/components/NavigationList.tsx CHANGED
@@ -70,6 +70,7 @@ interface NavigationListItemProps
70
70
  label?: string;
71
71
  icon?: React.ComponentType;
72
72
  moreMenu?: React.ReactNode;
73
+ status?: "idle" | "unread" | "blocked";
73
74
  }
74
75
 
75
76
  const NavigationListItem = React.forwardRef<
@@ -88,6 +89,7 @@ const NavigationListItem = React.forwardRef<
88
89
  replace,
89
90
  shallow,
90
91
  moreMenu,
92
+ status = "idle",
91
93
  ...props
92
94
  },
93
95
  ref
@@ -100,6 +102,19 @@ const NavigationListItem = React.forwardRef<
100
102
  }
101
103
  };
102
104
 
105
+ const getStatusDotColor = () => {
106
+ switch (status) {
107
+ case "unread":
108
+ return "s-bg-highlight-500 dark:s-bg-highlight-500-night";
109
+ case "blocked":
110
+ return "s-bg-warning-500 dark:s-bg-warning-500-night";
111
+ default:
112
+ return "";
113
+ }
114
+ };
115
+
116
+ const shouldShowStatusDot = status === "unread" || status === "blocked";
117
+
103
118
  return (
104
119
  <div
105
120
  className={cn("s-group/menu-item s-relative", className)}
@@ -132,6 +147,14 @@ const NavigationListItem = React.forwardRef<
132
147
  onMouseDown={handleMouseDown}
133
148
  onMouseUp={() => setIsPressed(false)}
134
149
  >
150
+ {shouldShowStatusDot && (
151
+ <div
152
+ className={cn(
153
+ "s-h-2 s-w-2 s-flex-shrink-0 s-rounded-full",
154
+ getStatusDotColor()
155
+ )}
156
+ />
157
+ )}
135
158
  {icon && <Icon visual={icon} size="sm" />}
136
159
  {label && (
137
160
  <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-8 group-data-[selected=true]/menu-item:s-pr-8">
package/src/icons/actions/Atom.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import type { SVGProps } from "react";
2
+ import * as React from "react";
3
+ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
4
+ <svg
5
+ xmlns="http://www.w3.org/2000/svg"
6
+ width="1em"
7
+ height="1em"
8
+ fill="none"
9
+ viewBox="0 0 24 25"
10
+ {...props}
11
+ >
12
+ <path
13
+ fill="#000"
14
+ fillRule="evenodd"
15
+ d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
16
+ clipRule="evenodd"
17
+ />
18
+ </svg>
19
+ );
20
+ export default SvgAtom;
package/src/icons/actions/index.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export { default as ActionArmchairIcon } from "./Armchair";
2
2
  export { default as ActionArrowDownOnSquareIcon } from "./ArrowDownOnSquare";
3
3
  export { default as ActionArrowUpOnSquareIcon } from "./ArrowUpOnSquare";
4
+ export { default as ActionAtomIcon } from "./Atom";
4
5
  export { default as ActionAttachmentIcon } from "./Attachment";
5
6
  export { default as ActionBankIcon } from "./Bank";
6
7
  export { default as ActionBarcodeIcon } from "./Barcode";
package/src/icons/app/Atom.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import type { SVGProps } from "react";
2
+ import * as React from "react";
3
+ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
4
+ <svg
5
+ xmlns="http://www.w3.org/2000/svg"
6
+ width="1em"
7
+ height="1em"
8
+ fill="none"
9
+ viewBox="0 0 24 25"
10
+ {...props}
11
+ >
12
+ <path
13
+ fill="#000"
14
+ fillRule="evenodd"
15
+ d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
16
+ clipRule="evenodd"
17
+ />
18
+ </svg>
19
+ );
20
+ export default SvgAtom;
package/src/icons/app/Telescope.tsx CHANGED
@@ -11,7 +11,9 @@ const SvgTelescope = (props: SVGProps<SVGSVGElement>) => (
11
11
  >
12
12
  <path
13
13
  fill="currentColor"
14
- d="M18.788 2.273a2 2 0 0 1 2.367 1.264l.057.19 1.515 6.06.038.194a2.001 2.001 0 0 1-1.492 2.232l-1.09.273v-.001a3 3 0 0 1-2.271-.338 2.992 2.992 0 0 1-.333-.236l-2.627.561a2.988 2.988 0 0 1-.794 2.607l2.736 5.474a1 1 0 0 1-1.788.895l-2.736-5.472A3.035 3.035 0 0 1 12 16c-.126 0-.25-.01-.371-.024l-2.735 5.472a1 1 0 0 1-1.789-.895l2.737-5.473a2.99 2.99 0 0 1-.751-1.357l-4.997 1.066h-.001a1.934 1.934 0 0 1-2.29-1.454L1.27 11.2l-.002-.005a2.071 2.071 0 0 1 1.337-2.448l.014-.004 12.97-4.265a2.99 2.99 0 0 1 2.108-1.934h.001l1.09-.272Z"
14
+ fillRule="evenodd"
15
+ d="m23.026 7.196-11.101 6.408 3.943 6.9-1.736.992L11 16.015l-3.132 5.481-1.736-.992 4.013-7.027-4.073 2.353-.5-.867-2.598 1.5-1-1.73L4.57 13.23l-.499-.865 4.6-2.657-.5-.865L20.027 2l3 5.196Zm-12.12 2.38 1 1.732 8.388-4.844-1-1.732-8.389 4.843Z"
16
+ clipRule="evenodd"
15
17
  />
16
18
  </svg>
17
19
  );
package/src/icons/app/Tools.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import type { SVGProps } from "react";
2
+ import * as React from "react";
3
+ const SvgTools = (props: SVGProps<SVGSVGElement>) => (
4
+ <svg
5
+ xmlns="http://www.w3.org/2000/svg"
6
+ width="1em"
7
+ height="1em"
8
+ fill="none"
9
+ viewBox="0 0 24 24"
10
+ {...props}
11
+ >
12
+ <path
13
+ fill="currentColor"
14
+ d="M2.5 7a4.5 4.5 0 1 0 9 0 4.5 4.5 0 0 0-9 0Zm0 10a4.5 4.5 0 1 0 9 0 4.5 4.5 0 0 0-9 0Zm10 0a4.5 4.5 0 1 0 9 0 4.5 4.5 0 0 0-9 0Zm5.025-5.845.278-.636a4.908 4.908 0 0 1 2.496-2.533l.854-.38c.463-.205.463-.878 0-1.083l-.806-.359a4.911 4.911 0 0 1-2.533-2.617l-.285-.688a.57.57 0 0 0-1.058 0l-.285.688a4.911 4.911 0 0 1-2.533 2.617l-.806.359c-.463.205-.463.878 0 1.083l.854.38a4.908 4.908 0 0 1 2.496 2.533l.278.636a.57.57 0 0 0 1.05 0Z"
15
+ />
16
+ </svg>
17
+ );
18
+ export default SvgTools;
package/src/icons/app/index.ts CHANGED
@@ -11,6 +11,7 @@ export { default as ArrowRightSIcon } from "./ArrowRightS";
11
11
  export { default as ArrowUpIcon } from "./ArrowUp";
12
12
  export { default as ArrowUpOnSquareIcon } from "./ArrowUpOnSquare";
13
13
  export { default as ArrowUpSIcon } from "./ArrowUpS";
14
+ export { default as AtomIcon } from "./Atom";
14
15
  export { default as AttachmentIcon } from "./Attachment";
15
16
  export { default as BarChartIcon } from "./BarChart";
16
17
  export { default as BellIcon } from "./Bell";
@@ -127,6 +128,7 @@ export { default as TagIcon } from "./Tag";
127
128
  export { default as TelescopeIcon } from "./Telescope";
128
129
  export { default as TestTubeIcon } from "./TestTube";
129
130
  export { default as TimeIcon } from "./Time";
131
+ export { default as ToolsIcon } from "./Tools";
130
132
  export { default as TranslateIcon } from "./Translate";
131
133
  export { default as TrashIcon } from "./Trash";
132
134
  export { default as TriangleIcon } from "./Triangle";
package/src/icons/src/actions/atom.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9736 2.28374C15.8053 2.03595 16.707 2.01634 17.5 2.47417C18.2929 2.93206 18.7266 3.72284 18.9277 4.56694C19.1282 5.40839 19.1243 6.39431 18.9746 7.43316C18.9464 7.62922 18.9102 7.82857 18.8711 8.03179C19.0671 8.0997 19.258 8.16899 19.4424 8.24273C20.4168 8.6325 21.2729 9.12209 21.9014 9.71636C22.5317 10.3126 22.9998 11.084 23 11.9996C23 12.9152 22.5317 13.6865 21.9014 14.2828C21.2729 14.8771 20.4169 15.3666 19.4424 15.7564C19.2581 15.8301 19.0671 15.8994 18.8711 15.9673C18.9102 16.1709 18.9463 16.3706 18.9746 16.5669C19.1243 17.6058 19.1282 18.5917 18.9277 19.4332C18.7266 20.2773 18.293 21.068 17.5 21.5259C16.707 21.9838 15.8053 21.9642 14.9736 21.7164C14.1447 21.4693 13.2926 20.9728 12.4678 20.3238C12.312 20.2012 12.1566 20.0707 12 19.9351C11.8434 20.0707 11.688 20.2012 11.5322 20.3238C10.7074 20.9728 9.85531 21.4693 9.02637 21.7164C8.19474 21.9642 7.29299 21.9838 6.5 21.5259C5.70704 21.068 5.27345 20.2773 5.07227 19.4332C4.87178 18.5917 4.87572 17.6058 5.02539 16.5669C5.05367 16.3707 5.0888 16.1708 5.12793 15.9673C4.93227 15.8995 4.74165 15.83 4.55762 15.7564C3.58313 15.3666 2.72709 14.8771 2.09863 14.2828C1.46826 13.6865 1 12.9152 1 11.9996C1.00015 11.084 1.46825 10.3126 2.09863 9.71636C2.7271 9.12209 3.58318 8.6325 4.55762 8.24273C4.74169 8.1691 4.93223 8.09961 5.12793 8.03179C5.08887 7.82863 5.05363 7.62916 5.02539 7.43316C4.87572 6.39431 4.8718 5.40839 5.07227 4.56694C5.27344 3.72283 5.70707 2.93206 6.5 2.47417C7.29299 2.01634 8.19474 2.03595 9.02637 2.28374C9.85532 2.53084 10.7074 3.02727 11.5322 3.67632C11.6879 3.7988 11.8436 3.92859 12 4.06402C12.1564 3.92858 12.3121 3.7988 12.4678 3.67632C13.2926 3.02727 14.1447 2.53084 14.9736 2.28374ZM7.06055 16.5015C7.03945 16.62 7.02139 16.7366 7.00488 16.8511C6.87662 17.7414 6.89522 18.4567 7.01758 18.9703C7.13928 19.4804 7.33666 19.7002 7.5 19.7945C7.66339 19.8888 7.95245 19.95 8.45508 19.8003C8.96101 19.6495 9.58906 19.3077 10.2959 18.7515C10.3866 18.6801 10.4775 18.6052 10.5693 18.5279C10.1047 18.0143 9.64666 17.4506 9.20117 16.8453C8.45436 16.7621 7.73747 16.6471 7.06055 16.5015ZM16.9385 16.5015C16.2615 16.6471 15.5447 16.7621 14.7979 16.8453C14.3523 17.4506 13.8944 18.0143 13.4297 18.5279C13.5217 18.6054 13.6132 18.68 13.7041 18.7515C14.4109 19.3077 15.039 19.6495 15.5449 19.8003C16.0476 19.95 16.3366 19.8888 16.5 19.7945C16.6633 19.7002 16.8607 19.4804 16.9824 18.9703C17.1048 18.4567 17.1234 17.7414 16.9951 16.8511C16.9786 16.7366 16.9596 16.62 16.9385 16.5015ZM12 16.9996C11.9619 16.9996 11.9238 16.9978 11.8857 16.9976C11.9235 17.0406 11.9612 17.0833 11.999 17.1255C12.037 17.0832 12.0753 17.0408 12.1133 16.9976C12.0756 16.9978 12.0378 16.9996 12 16.9996ZM12 8.99956C11.4183 8.99956 10.8509 9.02188 10.3018 9.06109C9.9938 9.51631 9.69271 9.99666 9.40234 10.4996C9.1119 11.0026 8.84581 11.5041 8.60547 11.9986C8.84608 12.4937 9.11148 12.9958 9.40234 13.4996C9.69267 14.0024 9.99384 14.4828 10.3018 14.938C10.8509 14.9772 11.4183 14.9996 12 14.9996C12.5814 14.9996 13.1484 14.9772 13.6973 14.938C14.0053 14.4827 14.3072 14.0026 14.5977 13.4996C14.8884 12.9959 15.153 12.4936 15.3936 11.9986C15.1533 11.5042 14.888 11.0025 14.5977 10.4996C14.3072 9.9965 14.0053 9.51645 13.6973 9.06109C13.1485 9.02193 12.5814 8.99956 12 8.99956ZM16.3301 14.4996C16.311 14.5326 16.2907 14.5653 16.2715 14.5982C16.3279 14.5869 16.3838 14.5747 16.4395 14.563C16.4217 14.5089 16.4042 14.4545 16.3857 14.4C16.3669 14.4329 16.3491 14.4666 16.3301 14.4996ZM7.55957 14.563C7.61519 14.5747 7.6712 14.5859 7.72754 14.5972C7.70858 14.5647 7.68878 14.5322 7.66992 14.4996C7.6508 14.4664 7.63222 14.4331 7.61328 14.4C7.59484 14.4545 7.57728 14.5089 7.55957 14.563ZM18.3682 9.97319C18.1558 10.6324 17.8972 11.311 17.5957 11.9996C17.897 12.6877 18.1558 13.366 18.3682 14.025C18.4812 13.984 18.5919 13.9429 18.6992 13.9C19.5342 13.5659 20.1438 13.1924 20.5273 12.8296C20.9083 12.4691 21 12.1882 21 11.9996C20.9999 11.8109 20.9082 11.5298 20.5273 11.1695C20.1438 10.8068 19.5342 10.4331 18.6992 10.0992C18.5918 10.0562 18.4814 10.0142 18.3682 9.97319ZM5.63086 9.97319C5.51795 10.0141 5.40796 10.0563 5.30078 10.0992C4.46585 10.4331 3.85624 10.8068 3.47266 11.1695C3.09178 11.5298 3.00014 11.8109 3 11.9996C3 12.1882 3.09166 12.4691 3.47266 12.8296C3.8562 13.1924 4.46576 13.5659 5.30078 13.9C5.40782 13.9428 5.51811 13.9841 5.63086 14.025C5.84322 13.3661 6.102 12.6877 6.40332 11.9996C6.10189 11.3111 5.84324 10.6324 5.63086 9.97319ZM7.55957 9.43609C7.57719 9.48989 7.59495 9.54398 7.61328 9.59819C7.63201 9.56543 7.65101 9.53231 7.66992 9.49956C7.68884 9.4668 7.70852 9.43452 7.72754 9.40191C7.67121 9.41318 7.61518 9.4244 7.55957 9.43609ZM16.3301 9.49956C16.3489 9.53217 16.3671 9.56558 16.3857 9.59819C16.4041 9.54397 16.4218 9.4899 16.4395 9.43609C16.3838 9.42439 16.3279 9.41221 16.2715 9.40093C16.2907 9.43393 16.3109 9.46641 16.3301 9.49956ZM8.45508 4.19976C7.9524 4.05004 7.66338 4.11132 7.5 4.20562C7.33665 4.29993 7.13928 4.51966 7.01758 5.02984C6.89522 5.54339 6.87662 6.25874 7.00488 7.14898C7.02135 7.26315 7.03952 7.37947 7.06055 7.49761C7.73748 7.35199 8.45436 7.23606 9.20117 7.15288C9.64668 6.5476 10.1047 5.98378 10.5693 5.47027C10.4778 5.39322 10.3863 5.31972 10.2959 5.24859C9.58906 4.69239 8.96101 4.35057 8.45508 4.19976ZM16.5 4.20562C16.3366 4.11132 16.0476 4.05004 15.5449 4.19976C15.039 4.35057 14.4109 4.69239 13.7041 5.24859C13.6135 5.31987 13.5214 5.39305 13.4297 5.47027C13.8944 5.98378 14.3523 6.54758 14.7979 7.15288C15.5447 7.23603 16.2615 7.35202 16.9385 7.49761C16.9595 7.37941 16.9786 7.26321 16.9951 7.14898C17.1234 6.25874 17.1048 5.54339 16.9824 5.02984C16.8607 4.51965 16.6634 4.29993 16.5 4.20562ZM11.8867 7.00054C11.9244 7.00038 11.9622 6.99956 12 6.99956C12.0375 6.99956 12.0749 7.00038 12.1123 7.00054C12.0745 6.95752 12.0368 6.9148 11.999 6.87261C11.9614 6.91464 11.9244 6.95769 11.8867 7.00054Z" fill="black"/>
3
+ </svg>
package/src/icons/src/app/atom.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9736 2.28374C15.8053 2.03595 16.707 2.01634 17.5 2.47417C18.2929 2.93206 18.7266 3.72284 18.9277 4.56694C19.1282 5.40839 19.1243 6.39431 18.9746 7.43316C18.9464 7.62922 18.9102 7.82857 18.8711 8.03179C19.0671 8.0997 19.258 8.16899 19.4424 8.24273C20.4168 8.6325 21.2729 9.12209 21.9014 9.71636C22.5317 10.3126 22.9998 11.084 23 11.9996C23 12.9152 22.5317 13.6865 21.9014 14.2828C21.2729 14.8771 20.4169 15.3666 19.4424 15.7564C19.2581 15.8301 19.0671 15.8994 18.8711 15.9673C18.9102 16.1709 18.9463 16.3706 18.9746 16.5669C19.1243 17.6058 19.1282 18.5917 18.9277 19.4332C18.7266 20.2773 18.293 21.068 17.5 21.5259C16.707 21.9838 15.8053 21.9642 14.9736 21.7164C14.1447 21.4693 13.2926 20.9728 12.4678 20.3238C12.312 20.2012 12.1566 20.0707 12 19.9351C11.8434 20.0707 11.688 20.2012 11.5322 20.3238C10.7074 20.9728 9.85531 21.4693 9.02637 21.7164C8.19474 21.9642 7.29299 21.9838 6.5 21.5259C5.70704 21.068 5.27345 20.2773 5.07227 19.4332C4.87178 18.5917 4.87572 17.6058 5.02539 16.5669C5.05367 16.3707 5.0888 16.1708 5.12793 15.9673C4.93227 15.8995 4.74165 15.83 4.55762 15.7564C3.58313 15.3666 2.72709 14.8771 2.09863 14.2828C1.46826 13.6865 1 12.9152 1 11.9996C1.00015 11.084 1.46825 10.3126 2.09863 9.71636C2.7271 9.12209 3.58318 8.6325 4.55762 8.24273C4.74169 8.1691 4.93223 8.09961 5.12793 8.03179C5.08887 7.82863 5.05363 7.62916 5.02539 7.43316C4.87572 6.39431 4.8718 5.40839 5.07227 4.56694C5.27344 3.72283 5.70707 2.93206 6.5 2.47417C7.29299 2.01634 8.19474 2.03595 9.02637 2.28374C9.85532 2.53084 10.7074 3.02727 11.5322 3.67632C11.6879 3.7988 11.8436 3.92859 12 4.06402C12.1564 3.92858 12.3121 3.7988 12.4678 3.67632C13.2926 3.02727 14.1447 2.53084 14.9736 2.28374ZM7.06055 16.5015C7.03945 16.62 7.02139 16.7366 7.00488 16.8511C6.87662 17.7414 6.89522 18.4567 7.01758 18.9703C7.13928 19.4804 7.33666 19.7002 7.5 19.7945C7.66339 19.8888 7.95245 19.95 8.45508 19.8003C8.96101 19.6495 9.58906 19.3077 10.2959 18.7515C10.3866 18.6801 10.4775 18.6052 10.5693 18.5279C10.1047 18.0143 9.64666 17.4506 9.20117 16.8453C8.45436 16.7621 7.73747 16.6471 7.06055 16.5015ZM16.9385 16.5015C16.2615 16.6471 15.5447 16.7621 14.7979 16.8453C14.3523 17.4506 13.8944 18.0143 13.4297 18.5279C13.5217 18.6054 13.6132 18.68 13.7041 18.7515C14.4109 19.3077 15.039 19.6495 15.5449 19.8003C16.0476 19.95 16.3366 19.8888 16.5 19.7945C16.6633 19.7002 16.8607 19.4804 16.9824 18.9703C17.1048 18.4567 17.1234 17.7414 16.9951 16.8511C16.9786 16.7366 16.9596 16.62 16.9385 16.5015ZM12 16.9996C11.9619 16.9996 11.9238 16.9978 11.8857 16.9976C11.9235 17.0406 11.9612 17.0833 11.999 17.1255C12.037 17.0832 12.0753 17.0408 12.1133 16.9976C12.0756 16.9978 12.0378 16.9996 12 16.9996ZM12 8.99956C11.4183 8.99956 10.8509 9.02188 10.3018 9.06109C9.9938 9.51631 9.69271 9.99666 9.40234 10.4996C9.1119 11.0026 8.84581 11.5041 8.60547 11.9986C8.84608 12.4937 9.11148 12.9958 9.40234 13.4996C9.69267 14.0024 9.99384 14.4828 10.3018 14.938C10.8509 14.9772 11.4183 14.9996 12 14.9996C12.5814 14.9996 13.1484 14.9772 13.6973 14.938C14.0053 14.4827 14.3072 14.0026 14.5977 13.4996C14.8884 12.9959 15.153 12.4936 15.3936 11.9986C15.1533 11.5042 14.888 11.0025 14.5977 10.4996C14.3072 9.9965 14.0053 9.51645 13.6973 9.06109C13.1485 9.02193 12.5814 8.99956 12 8.99956ZM16.3301 14.4996C16.311 14.5326 16.2907 14.5653 16.2715 14.5982C16.3279 14.5869 16.3838 14.5747 16.4395 14.563C16.4217 14.5089 16.4042 14.4545 16.3857 14.4C16.3669 14.4329 16.3491 14.4666 16.3301 14.4996ZM7.55957 14.563C7.61519 14.5747 7.6712 14.5859 7.72754 14.5972C7.70858 14.5647 7.68878 14.5322 7.66992 14.4996C7.6508 14.4664 7.63222 14.4331 7.61328 14.4C7.59484 14.4545 7.57728 14.5089 7.55957 14.563ZM18.3682 9.97319C18.1558 10.6324 17.8972 11.311 17.5957 11.9996C17.897 12.6877 18.1558 13.366 18.3682 14.025C18.4812 13.984 18.5919 13.9429 18.6992 13.9C19.5342 13.5659 20.1438 13.1924 20.5273 12.8296C20.9083 12.4691 21 12.1882 21 11.9996C20.9999 11.8109 20.9082 11.5298 20.5273 11.1695C20.1438 10.8068 19.5342 10.4331 18.6992 10.0992C18.5918 10.0562 18.4814 10.0142 18.3682 9.97319ZM5.63086 9.97319C5.51795 10.0141 5.40796 10.0563 5.30078 10.0992C4.46585 10.4331 3.85624 10.8068 3.47266 11.1695C3.09178 11.5298 3.00014 11.8109 3 11.9996C3 12.1882 3.09166 12.4691 3.47266 12.8296C3.8562 13.1924 4.46576 13.5659 5.30078 13.9C5.40782 13.9428 5.51811 13.9841 5.63086 14.025C5.84322 13.3661 6.102 12.6877 6.40332 11.9996C6.10189 11.3111 5.84324 10.6324 5.63086 9.97319ZM7.55957 9.43609C7.57719 9.48989 7.59495 9.54398 7.61328 9.59819C7.63201 9.56543 7.65101 9.53231 7.66992 9.49956C7.68884 9.4668 7.70852 9.43452 7.72754 9.40191C7.67121 9.41318 7.61518 9.4244 7.55957 9.43609ZM16.3301 9.49956C16.3489 9.53217 16.3671 9.56558 16.3857 9.59819C16.4041 9.54397 16.4218 9.4899 16.4395 9.43609C16.3838 9.42439 16.3279 9.41221 16.2715 9.40093C16.2907 9.43393 16.3109 9.46641 16.3301 9.49956ZM8.45508 4.19976C7.9524 4.05004 7.66338 4.11132 7.5 4.20562C7.33665 4.29993 7.13928 4.51966 7.01758 5.02984C6.89522 5.54339 6.87662 6.25874 7.00488 7.14898C7.02135 7.26315 7.03952 7.37947 7.06055 7.49761C7.73748 7.35199 8.45436 7.23606 9.20117 7.15288C9.64668 6.5476 10.1047 5.98378 10.5693 5.47027C10.4778 5.39322 10.3863 5.31972 10.2959 5.24859C9.58906 4.69239 8.96101 4.35057 8.45508 4.19976ZM16.5 4.20562C16.3366 4.11132 16.0476 4.05004 15.5449 4.19976C15.039 4.35057 14.4109 4.69239 13.7041 5.24859C13.6135 5.31987 13.5214 5.39305 13.4297 5.47027C13.8944 5.98378 14.3523 6.54758 14.7979 7.15288C15.5447 7.23603 16.2615 7.35202 16.9385 7.49761C16.9595 7.37941 16.9786 7.26321 16.9951 7.14898C17.1234 6.25874 17.1048 5.54339 16.9824 5.02984C16.8607 4.51965 16.6634 4.29993 16.5 4.20562ZM11.8867 7.00054C11.9244 7.00038 11.9622 6.99956 12 6.99956C12.0375 6.99956 12.0749 7.00038 12.1123 7.00054C12.0745 6.95752 12.0368 6.9148 11.999 6.87261C11.9614 6.91464 11.9244 6.95769 11.8867 7.00054Z" fill="black"/>
3
+ </svg>
package/src/icons/src/app/telescope.svg CHANGED
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M18.7878 2.27274C19.3019 2.14457 19.8462 2.22585 20.3005 2.49832C20.6982 2.73688 20.9997 3.10471 21.155 3.53738L21.2117 3.72684L21.2126 3.72781L22.7273 9.78738L22.7654 9.98074C22.8326 10.4359 22.7412 10.9029 22.5027 11.3011C22.2301 11.7559 21.7876 12.0842 21.2732 12.2132H21.2722L20.1824 12.4856V12.4846C19.4107 12.6774 18.5939 12.556 17.9119 12.1468C17.7945 12.0763 17.6844 11.9962 17.5789 11.9114L14.9519 12.472C14.9824 12.6435 14.9998 12.8199 14.9998 13.0003C14.9997 13.8085 14.6777 14.5399 14.158 15.0794L16.8943 20.553C17.141 21.0469 16.9408 21.6479 16.447 21.8948C15.9533 22.1414 15.3533 21.941 15.1062 21.4475L12.3699 15.9759C12.2485 15.9908 12.1251 16.0003 11.9998 16.0003C11.874 16.0003 11.7503 15.9909 11.6287 15.9759L8.89429 21.4475C8.64719 21.9413 8.04635 22.1417 7.55249 21.8948C7.05869 21.6478 6.85851 21.0469 7.10522 20.553L9.84155 15.0804C9.48191 14.7073 9.21921 14.2422 9.09058 13.7229L4.09351 14.7893L4.09253 14.7884C3.59734 14.8946 3.08008 14.8035 2.6521 14.5325C2.22289 14.2606 1.91727 13.8302 1.80249 13.3352L1.80347 13.3343L1.27026 11.2014L1.26831 11.1956C1.14632 10.6946 1.21548 10.1657 1.46265 9.71317C1.70992 9.26053 2.11759 8.91635 2.60522 8.74832C2.60967 8.7468 2.61443 8.74588 2.6189 8.74442L15.5896 4.47879C15.6571 4.28249 15.7448 4.09213 15.8533 3.91141C16.2625 3.22967 16.9257 2.7383 17.697 2.5452L17.698 2.54422L18.7878 2.27274Z" fill="#111418"/>
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M23.0264 7.19629L11.9248 13.6035L15.8682 20.5039L14.1318 21.4961L11 16.0146L7.86816 21.4961L6.13184 20.5039L10.1445 13.4775L6.07227 15.8301L5.57129 14.9629L2.97363 16.4639L1.97363 14.7324L4.57129 13.2314L4.07227 12.3662L8.67188 9.70898L8.17285 8.84375L20.0264 2L23.0264 7.19629ZM10.9053 9.5752L11.9053 11.3076L20.2939 6.46387L19.2939 4.73242L10.9053 9.5752Z" fill="#111418"/>
3
3
  </svg>
package/src/icons/src/app/tools.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M2.5 7C2.5 9.48528 4.51472 11.5 7 11.5C9.48528 11.5 11.5 9.48528 11.5 7C11.5 4.51472 9.48528 2.5 7 2.5C4.51472 2.5 2.5 4.51472 2.5 7ZM2.5 17C2.5 19.4853 4.51472 21.5 7 21.5C9.48528 21.5 11.5 19.4853 11.5 17C11.5 14.5147 9.48528 12.5 7 12.5C4.51472 12.5 2.5 14.5147 2.5 17ZM12.5 17C12.5 19.4853 14.5147 21.5 17 21.5C19.4853 21.5 21.5 19.4853 21.5 17C21.5 14.5147 19.4853 12.5 17 12.5C14.5147 12.5 12.5 14.5147 12.5 17ZM17.5252 11.155L17.8026 10.5186C18.297 9.38398 19.1876 8.48059 20.2988 7.98638L21.1534 7.60631C21.6155 7.4008 21.6155 6.7284 21.1534 6.52289L20.3467 6.16406C19.2068 5.65713 18.3002 4.72031 17.8143 3.54712L17.5295 2.85945C17.3309 2.38018 16.669 2.38018 16.4705 2.85945L16.1856 3.54712C15.6997 4.72031 14.7932 5.65713 13.6534 6.16406L12.8466 6.52289C12.3845 6.7284 12.3845 7.4008 12.8466 7.60631L13.7011 7.98638C14.8124 8.48059 15.7029 9.38398 16.1974 10.5186L16.4748 11.155C16.6778 11.6209 17.3222 11.6209 17.5252 11.155Z" fill="#111418"/>
3
+ </svg>
package/src/stories/NavigationList.stories.tsx CHANGED
@@ -6,7 +6,6 @@ import {
6
6
  DropdownMenuContent,
7
7
  DropdownMenuItem,
8
8
  DropdownMenuTrigger,
9
- LockIcon,
10
9
  NavigationList,
11
10
  NavigationListItem,
12
11
  NavigationListItemAction,
@@ -79,6 +78,16 @@ export const Demo = () => {
79
78
  <NavigationListLabel label={section.label} />
80
79
  {section.items.map((title, index) => {
81
80
  const itemIndex = allItems.indexOf(title);
81
+ // Add status based on index for demonstration
82
+ const getStatus = (idx: number) => {
83
+ if (idx % 5 === 0) {
84
+ return "unread";
85
+ }
86
+ if (idx % 3 === 0) {
87
+ return "blocked";
88
+ }
89
+ return "idle";
90
+ };
82
91
  return (
83
92
  <NavigationListItem
84
93
  key={index}
@@ -94,7 +103,7 @@ export const Demo = () => {
94
103
  label={title}
95
104
  className="s-w-full"
96
105
  moreMenu={getMoreMenu(title)}
97
- icon={LockIcon}
106
+ status={getStatus(index)}
98
107
  />
99
108
  );
100
109
  })}
@@ -109,6 +118,16 @@ export const Demo = () => {
109
118
  <NavigationListLabel label={section.label} isSticky />
110
119
  {section.items.map((title, index) => {
111
120
  const itemIndex = allItems.indexOf(title);
121
+ // Add status based on index for demonstration.
122
+ const getStatus = (idx: number) => {
123
+ if (idx % 5 === 0) {
124
+ return "unread";
125
+ }
126
+ if (idx % 3 === 0) {
127
+ return "blocked";
128
+ }
129
+ return "idle";
130
+ };
112
131
  return (
113
132
  <NavigationListItem
114
133
  key={index}
@@ -124,7 +143,7 @@ export const Demo = () => {
124
143
  label={title}
125
144
  className="s-w-full"
126
145
  moreMenu={getMoreMenu(title)}
127
- icon={LockIcon}
146
+ status={getStatus(index)}
128
147
  />
129
148
  );
130
149
  })}