ai-design-system 0.1.96 → 0.1.97

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 (8) hide show
  1. package/components/composites/StoriesBar/StoriesBar.tsx +16 -19
  2. package/dist/index.cjs +28 -31
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +5 -28
  5. package/dist/index.d.ts +171 -171
  6. package/dist/index.js +28 -31
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/components/composites/StoriesBar/StoriesBar.tsx CHANGED
@@ -31,20 +31,17 @@ function getStoryStatusStyle(status?: StoryItem["status"]) {
31
31
  case "generating":
32
32
  return {
33
33
  iconColor: "text-amber-500",
34
- ringClass: "ring-2 ring-amber-500 animate-pulse",
35
34
  badgeBg: "bg-amber-500",
36
35
  };
37
36
  case "ready":
38
37
  return {
39
38
  iconColor: "text-emerald-500",
40
- ringClass: "ring-1 ring-emerald-500/70 group-hover:ring-emerald-500",
41
39
  badgeBg: "bg-emerald-500",
42
40
  };
43
41
  case "draft":
44
42
  default:
45
43
  return {
46
44
  iconColor: "text-muted-foreground",
47
- ringClass: "ring-1 ring-border group-hover:ring-primary/60",
48
45
  badgeBg: "bg-muted-foreground",
49
46
  };
50
47
  }
@@ -55,11 +52,11 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
55
52
  return (
56
53
  <div
57
54
  ref={ref}
58
- className={cn("w-full border-b shrink-0", className)}
55
+ className={cn("w-full border-b border-border bg-background shrink-0", className)}
59
56
  data-testid="stories-bar"
60
57
  {...props}
61
58
  >
62
- <div className="flex items-center gap-3 overflow-x-auto no-scrollbar scroll-smooth">
59
+ <div className="flex items-center gap-2.5 px-3 py-1.5 overflow-x-auto no-scrollbar scroll-smooth">
63
60
  {stories.map((story) => {
64
61
  const isActive = story.id === activeStoryId;
65
62
  const isGenerating = story.status === "generating";
@@ -75,15 +72,15 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
75
72
  data-testid={`btn-story-${story.id}`}
76
73
  aria-label={`Open story: ${story.title}`}
77
74
  >
78
- <div
79
- className={cn(
80
- "relative w-12 h-12 shrink-0 aspect-square rounded-full transition-transform group-hover:scale-105",
81
- isActive
82
- ? "ring-2 ring-primary ring-offset-2 ring-offset-background"
83
- : statusStyle.ringClass
84
- )}
85
- >
86
- <div className="w-full h-full rounded-full flex items-center justify-center border shadow-sm overflow-hidden select-none">
75
+ <div className="relative w-9 h-9 shrink-0 aspect-square rounded-full transition-transform group-hover:scale-105">
76
+ <div
77
+ className={cn(
78
+ "w-full h-full rounded-full flex items-center justify-center border transition-colors overflow-hidden select-none",
79
+ isActive
80
+ ? "border-primary bg-muted/60"
81
+ : "border-border/50 bg-muted/40"
82
+ )}
83
+ >
87
84
  {story.thumbnailUrl ? (
88
85
  <img
89
86
  src={story.thumbnailUrl}
@@ -93,20 +90,20 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
93
90
  ) : (
94
91
  <Icon
95
92
  name={iconName}
96
- className={cn("w-5 h-5 transition-colors", statusStyle.iconColor)}
93
+ className={cn("w-4 h-4 transition-colors", statusStyle.iconColor)}
97
94
  />
98
95
  )}
99
96
  </div>
100
97
 
101
98
  {isGenerating ? (
102
- <span className="absolute bottom-0 right-0 flex h-2.5 w-2.5">
99
+ <span className="absolute bottom-0 right-0 flex h-2 w-2">
103
100
  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75" />
104
- <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500" />
101
+ <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-500" />
105
102
  </span>
106
103
  ) : (
107
104
  <span
108
105
  className={cn(
109
- "absolute bottom-0 right-0 inline-flex rounded-full h-2.5 w-2.5 ring-2 ring-background",
106
+ "absolute bottom-0 right-0 inline-flex rounded-full h-2 w-2 ring-1.5 ring-background",
110
107
  statusStyle.badgeBg
111
108
  )}
112
109
  />
@@ -115,7 +112,7 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
115
112
 
116
113
  <span
117
114
  className={cn(
118
- "text-xs truncate max-w-[58px] text-center",
115
+ "text-[10px] leading-tight truncate max-w-[56px] text-center",
119
116
  isActive
120
117
  ? "font-semibold text-foreground"
121
118
  : "text-muted-foreground group-hover:text-foreground"
package/dist/index.cjs CHANGED
@@ -14398,20 +14398,17 @@ function getStoryStatusStyle(status) {
14398
14398
  case "generating":
14399
14399
  return {
14400
14400
  iconColor: "text-amber-500",
14401
- ringClass: "ring-2 ring-amber-500 animate-pulse",
14402
14401
  badgeBg: "bg-amber-500"
14403
14402
  };
14404
14403
  case "ready":
14405
14404
  return {
14406
14405
  iconColor: "text-emerald-500",
14407
- ringClass: "ring-1 ring-emerald-500/70 group-hover:ring-emerald-500",
14408
14406
  badgeBg: "bg-emerald-500"
14409
14407
  };
14410
14408
  case "draft":
14411
14409
  default:
14412
14410
  return {
14413
14411
  iconColor: "text-muted-foreground",
14414
- ringClass: "ring-1 ring-border group-hover:ring-primary/60",
14415
14412
  badgeBg: "bg-muted-foreground"
14416
14413
  };
14417
14414
  }
@@ -14423,10 +14420,10 @@ var StoriesBar = React3__namespace.forwardRef(
14423
14420
  "div",
14424
14421
  __spreadProps(__spreadValues({
14425
14422
  ref,
14426
- className: cn("w-full border-b shrink-0", className),
14423
+ className: cn("w-full border-b border-border bg-background shrink-0", className),
14427
14424
  "data-testid": "stories-bar"
14428
14425
  }, props), {
14429
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 overflow-x-auto no-scrollbar scroll-smooth", children: stories.map((story) => {
14426
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2.5 px-3 py-1.5 overflow-x-auto no-scrollbar scroll-smooth", children: stories.map((story) => {
14430
14427
  const isActive = story.id === activeStoryId;
14431
14428
  const isGenerating = story.status === "generating";
14432
14429
  const statusStyle = getStoryStatusStyle(story.status);
@@ -14440,15 +14437,15 @@ var StoriesBar = React3__namespace.forwardRef(
14440
14437
  "data-testid": `btn-story-${story.id}`,
14441
14438
  "aria-label": `Open story: ${story.title}`,
14442
14439
  children: [
14443
- /* @__PURE__ */ jsxRuntime.jsxs(
14444
- "div",
14445
- {
14446
- className: cn(
14447
- "relative w-12 h-12 shrink-0 aspect-square rounded-full transition-transform group-hover:scale-105",
14448
- isActive ? "ring-2 ring-primary ring-offset-2 ring-offset-background" : statusStyle.ringClass
14449
- ),
14450
- children: [
14451
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full rounded-full flex items-center justify-center border shadow-sm overflow-hidden select-none", children: story.thumbnailUrl ? /* @__PURE__ */ jsxRuntime.jsx(
14440
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-9 h-9 shrink-0 aspect-square rounded-full transition-transform group-hover:scale-105", children: [
14441
+ /* @__PURE__ */ jsxRuntime.jsx(
14442
+ "div",
14443
+ {
14444
+ className: cn(
14445
+ "w-full h-full rounded-full flex items-center justify-center border transition-colors overflow-hidden select-none",
14446
+ isActive ? "border-primary bg-muted/60" : "border-border/50 bg-muted/40"
14447
+ ),
14448
+ children: story.thumbnailUrl ? /* @__PURE__ */ jsxRuntime.jsx(
14452
14449
  "img",
14453
14450
  {
14454
14451
  src: story.thumbnailUrl,
@@ -14459,29 +14456,29 @@ var StoriesBar = React3__namespace.forwardRef(
14459
14456
  Icon,
14460
14457
  {
14461
14458
  name: iconName,
14462
- className: cn("w-5 h-5 transition-colors", statusStyle.iconColor)
14463
- }
14464
- ) }),
14465
- isGenerating ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-0 right-0 flex h-2.5 w-2.5", children: [
14466
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75" }),
14467
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500" })
14468
- ] }) : /* @__PURE__ */ jsxRuntime.jsx(
14469
- "span",
14470
- {
14471
- className: cn(
14472
- "absolute bottom-0 right-0 inline-flex rounded-full h-2.5 w-2.5 ring-2 ring-background",
14473
- statusStyle.badgeBg
14474
- )
14459
+ className: cn("w-4 h-4 transition-colors", statusStyle.iconColor)
14475
14460
  }
14476
14461
  )
14477
- ]
14478
- }
14479
- ),
14462
+ }
14463
+ ),
14464
+ isGenerating ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-0 right-0 flex h-2 w-2", children: [
14465
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75" }),
14466
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-amber-500" })
14467
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(
14468
+ "span",
14469
+ {
14470
+ className: cn(
14471
+ "absolute bottom-0 right-0 inline-flex rounded-full h-2 w-2 ring-1.5 ring-background",
14472
+ statusStyle.badgeBg
14473
+ )
14474
+ }
14475
+ )
14476
+ ] }),
14480
14477
  /* @__PURE__ */ jsxRuntime.jsx(
14481
14478
  "span",
14482
14479
  {
14483
14480
  className: cn(
14484
- "text-xs truncate max-w-[58px] text-center",
14481
+ "text-[10px] leading-tight truncate max-w-[56px] text-center",
14485
14482
  isActive ? "font-semibold text-foreground" : "text-muted-foreground group-hover:text-foreground"
14486
14483
  ),
14487
14484
  title: story.title,