@david-richard/notify-ds 1.0.1 → 1.0.3

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/dist/index.d.mts +17 -13
  2. package/dist/index.d.ts +17 -13
  3. package/dist/index.js +19 -20
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +19 -20
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +25 -3
  8. package/tokens.css +1 -0
package/dist/index.d.mts CHANGED
@@ -180,13 +180,17 @@ interface SelectorGroupProps {
180
180
  declare function SelectorGroup({ children, className }: SelectorGroupProps): react_jsx_runtime.JSX.Element;
181
181
 
182
182
  /**
183
- * TabBar — Qu Notify segmented tab selector.
183
+ * TabBar — Qu Notify top-level tab selector (L1).
184
184
  *
185
185
  * Visual spec:
186
- * Container: gray-100 (#DEDEDE) pill, 4px padding all sides, full-radius
187
- * Selected tab: black fill, white text, full-radius pill
188
- * Unselected tab: transparent, primary text
189
- * Font: Inter Medium 14px
186
+ * Layout: standalone pills sitting in a row with gaps (no outer container).
187
+ * Selected tab: black fill, white text, full-radius pill.
188
+ * Unselected tab: gray-100 fill, primary text, full-radius pill.
189
+ * Font: Inter Medium 14px.
190
+ *
191
+ * Differs from Switcher: TabBar is for primary page-level navigation where
192
+ * each tab reads as its own standalone affordance. Switcher is for inline
193
+ * filters where the segments share an outer track.
190
194
  *
191
195
  * Usage (uncontrolled):
192
196
  * <TabBar tabs={["Sales", "Labor", "Store"]} defaultValue="Sales" />
@@ -236,18 +240,18 @@ interface TabPanelProps {
236
240
  declare function TabPanel({ children, className }: TabPanelProps): react_jsx_runtime.JSX.Element;
237
241
 
238
242
  /**
239
- * Switcher — Qu Notify segmented control (iOS-style).
243
+ * Switcher — Qu Notify segmented control (L2 — inline data filter).
240
244
  *
241
245
  * Visual spec:
242
- * Container: gray-100 (#DEDEDE) bg, 8px corner radius, 3px padding
243
- * Selected segment: black fill, white text, 6px corner radius
244
- * Unselected segment: transparent, secondary text (gray)
246
+ * Container: gray-100 (#DEDEDE) bg, full-radius pill, 3px padding
247
+ * Selected segment: black fill, white text, full-radius pill
248
+ * Unselected segment: transparent, primary text (black)
245
249
  * Font: Inter Medium 14px
246
250
  *
247
251
  * Differs from TabBar:
248
- * - TabBar: full-radius pill, used for primary page-level navigation
249
- * - Switcher: square-ish corners (8px), used for inline data filters
250
- * (e.g. Day / Week / Month, Net / Gross, All / Open / Closed)
252
+ * - TabBar: standalone pill tabs, no outer container — primary page navigation
253
+ * - Switcher: outer pill container holding inner pill segments — inline
254
+ * data filters (e.g. Day / Week / Month, Net / Gross, All / Open / Closed)
251
255
  *
252
256
  * Usage (uncontrolled):
253
257
  * <Switcher segments={["Day", "Week", "Month"]} defaultValue="Week" />
@@ -356,7 +360,7 @@ declare function BottomNavContainer({ children }: {
356
360
  * <Badge icon={<TrendUpIcon />} variant="success">Net Sales</Badge>
357
361
  */
358
362
  declare const badgeVariants: (props?: ({
359
- variant?: "alert" | "error" | "default" | "success" | "warning" | "info" | "neutral" | "brand" | null | undefined;
363
+ variant?: "default" | "alert" | "error" | "success" | "warning" | "info" | "neutral" | "brand" | null | undefined;
360
364
  size?: "sm" | "md" | null | undefined;
361
365
  } & class_variance_authority_types.ClassProp) | undefined) => string;
362
366
  interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
package/dist/index.d.ts CHANGED
@@ -180,13 +180,17 @@ interface SelectorGroupProps {
180
180
  declare function SelectorGroup({ children, className }: SelectorGroupProps): react_jsx_runtime.JSX.Element;
181
181
 
182
182
  /**
183
- * TabBar — Qu Notify segmented tab selector.
183
+ * TabBar — Qu Notify top-level tab selector (L1).
184
184
  *
185
185
  * Visual spec:
186
- * Container: gray-100 (#DEDEDE) pill, 4px padding all sides, full-radius
187
- * Selected tab: black fill, white text, full-radius pill
188
- * Unselected tab: transparent, primary text
189
- * Font: Inter Medium 14px
186
+ * Layout: standalone pills sitting in a row with gaps (no outer container).
187
+ * Selected tab: black fill, white text, full-radius pill.
188
+ * Unselected tab: gray-100 fill, primary text, full-radius pill.
189
+ * Font: Inter Medium 14px.
190
+ *
191
+ * Differs from Switcher: TabBar is for primary page-level navigation where
192
+ * each tab reads as its own standalone affordance. Switcher is for inline
193
+ * filters where the segments share an outer track.
190
194
  *
191
195
  * Usage (uncontrolled):
192
196
  * <TabBar tabs={["Sales", "Labor", "Store"]} defaultValue="Sales" />
@@ -236,18 +240,18 @@ interface TabPanelProps {
236
240
  declare function TabPanel({ children, className }: TabPanelProps): react_jsx_runtime.JSX.Element;
237
241
 
238
242
  /**
239
- * Switcher — Qu Notify segmented control (iOS-style).
243
+ * Switcher — Qu Notify segmented control (L2 — inline data filter).
240
244
  *
241
245
  * Visual spec:
242
- * Container: gray-100 (#DEDEDE) bg, 8px corner radius, 3px padding
243
- * Selected segment: black fill, white text, 6px corner radius
244
- * Unselected segment: transparent, secondary text (gray)
246
+ * Container: gray-100 (#DEDEDE) bg, full-radius pill, 3px padding
247
+ * Selected segment: black fill, white text, full-radius pill
248
+ * Unselected segment: transparent, primary text (black)
245
249
  * Font: Inter Medium 14px
246
250
  *
247
251
  * Differs from TabBar:
248
- * - TabBar: full-radius pill, used for primary page-level navigation
249
- * - Switcher: square-ish corners (8px), used for inline data filters
250
- * (e.g. Day / Week / Month, Net / Gross, All / Open / Closed)
252
+ * - TabBar: standalone pill tabs, no outer container — primary page navigation
253
+ * - Switcher: outer pill container holding inner pill segments — inline
254
+ * data filters (e.g. Day / Week / Month, Net / Gross, All / Open / Closed)
251
255
  *
252
256
  * Usage (uncontrolled):
253
257
  * <Switcher segments={["Day", "Week", "Month"]} defaultValue="Week" />
@@ -356,7 +360,7 @@ declare function BottomNavContainer({ children }: {
356
360
  * <Badge icon={<TrendUpIcon />} variant="success">Net Sales</Badge>
357
361
  */
358
362
  declare const badgeVariants: (props?: ({
359
- variant?: "alert" | "error" | "default" | "success" | "warning" | "info" | "neutral" | "brand" | null | undefined;
363
+ variant?: "default" | "alert" | "error" | "success" | "warning" | "info" | "neutral" | "brand" | null | undefined;
360
364
  size?: "sm" | "md" | null | undefined;
361
365
  } & class_variance_authority_types.ClassProp) | undefined) => string;
362
366
  interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
package/dist/index.js CHANGED
@@ -316,9 +316,9 @@ var Checkbox = React4__namespace.forwardRef(
316
316
  {
317
317
  "aria-hidden": "true",
318
318
  className: cn(
319
- "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[4px]",
320
- "border-[1.5px] transition-colors duration-[120ms]",
321
- showCheck || showDash ? "border-transparent bg-[var(--color-primary,#40CCF2)]" : "border-[var(--color-secondary-border,#339FB8)] bg-transparent"
319
+ "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[6px]",
320
+ "border-[2px] transition-colors duration-[120ms]",
321
+ showCheck || showDash ? "border-transparent bg-[var(--color-secondary,#339FB8)] text-[var(--color-foreground,#000)]" : "border-[var(--color-secondary,#339FB8)] bg-transparent"
322
322
  ),
323
323
  children: [
324
324
  showCheck && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}),
@@ -337,10 +337,10 @@ var Checkbox = React4__namespace.forwardRef(
337
337
  );
338
338
  Checkbox.displayName = "Checkbox";
339
339
  function CheckIcon() {
340
- return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "1,4 4,7 10,1" }) });
340
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "1,4 4,7 10,1" }) });
341
341
  }
342
342
  function DashIcon() {
343
- return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "9", y2: "1" }) });
343
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "9", y2: "1" }) });
344
344
  }
345
345
  var Radio = React4__namespace.forwardRef(
346
346
  ({ label, helperText, disabled, checked, defaultChecked, className, onChange, ...props }, ref) => {
@@ -378,10 +378,10 @@ var Radio = React4__namespace.forwardRef(
378
378
  "aria-hidden": "true",
379
379
  className: cn(
380
380
  "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full",
381
- "border-[1.5px] transition-colors duration-[120ms]",
382
- currentChecked ? "border-transparent bg-[var(--color-primary,#40CCF2)]" : "border-[var(--color-secondary-border,#339FB8)] bg-transparent"
381
+ "border-[2px] bg-transparent transition-colors duration-[120ms]",
382
+ "border-[var(--color-secondary,#339FB8)]"
383
383
  ),
384
- children: currentChecked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-[6px] w-[6px] rounded-full bg-white" })
384
+ children: currentChecked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-[8px] w-[8px] rounded-full bg-[var(--color-foreground,#000)]" })
385
385
  }
386
386
  ),
387
387
  (label || helperText) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col gap-0.5", children: [
@@ -462,20 +462,20 @@ var Toggle = React4__namespace.forwardRef(
462
462
  onKeyDown: handleKeyDown,
463
463
  className: cn(
464
464
  // track
465
- "relative inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer rounded-full",
465
+ "relative inline-flex h-[19px] w-[45px] shrink-0 cursor-pointer rounded-full",
466
466
  "border-0 outline-none transition-colors duration-[180ms] ease-[cubic-bezier(0.2,0,0,1)]",
467
- "focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-2",
467
+ "focus-visible:ring-2 focus-visible:ring-[var(--color-secondary,#339FB8)] focus-visible:ring-offset-2",
468
468
  "disabled:cursor-not-allowed",
469
- currentOn ? "bg-[var(--color-primary,#40CCF2)]" : "bg-[var(--color-inactive,#DEDEDE)]"
469
+ currentOn ? "bg-[var(--color-secondary,#339FB8)]" : "bg-[var(--color-inactive,#DEDEDE)]"
470
470
  ),
471
471
  children: /* @__PURE__ */ jsxRuntime.jsx(
472
472
  "span",
473
473
  {
474
474
  "aria-hidden": "true",
475
475
  className: cn(
476
- "absolute top-[2px] h-[20px] w-[20px] rounded-full bg-white shadow-sm",
476
+ "absolute top-[2px] h-[15px] w-[24px] rounded-full bg-white shadow-sm",
477
477
  "transition-transform duration-[180ms] ease-[cubic-bezier(0.2,0,0,1)]",
478
- currentOn ? "translate-x-[22px]" : "translate-x-[2px]"
478
+ currentOn ? "translate-x-[19px]" : "translate-x-[2px]"
479
479
  )
480
480
  }
481
481
  )
@@ -518,7 +518,7 @@ var Toggle = React4__namespace.forwardRef(
518
518
  Toggle.displayName = "Toggle";
519
519
  var selectorVariants = classVarianceAuthority.cva(
520
520
  [
521
- "inline-flex items-center gap-1.5 rounded-full select-none cursor-pointer",
521
+ "inline-flex items-center gap-1.5 rounded-xl select-none cursor-pointer",
522
522
  "py-2 pl-3.5 pr-2.5",
523
523
  "font-['Red_Hat_Text'] text-[14px] font-medium leading-tight",
524
524
  "border-[1.5px] transition-colors duration-[120ms]",
@@ -639,8 +639,7 @@ function TabBar({
639
639
  role: "tablist",
640
640
  "aria-label": "Tabs",
641
641
  className: cn(
642
- "inline-flex items-center gap-1 rounded-full p-1",
643
- "bg-[var(--color-inactive,#DEDEDE)]",
642
+ "inline-flex items-center gap-2",
644
643
  stretch && "w-full",
645
644
  className
646
645
  ),
@@ -659,7 +658,7 @@ function TabBar({
659
658
  "outline-none transition-colors duration-[120ms]",
660
659
  "focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-1",
661
660
  stretch && "flex-1 text-center",
662
- isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-transparent text-[var(--color-text-primary,#000)] hover:bg-black/5"
661
+ isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-[var(--color-inactive,#DEDEDE)] text-[var(--color-text-primary,#000)] hover:brightness-95"
663
662
  ),
664
663
  children: tab
665
664
  },
@@ -710,7 +709,7 @@ function Switcher({
710
709
  {
711
710
  role: "group",
712
711
  className: cn(
713
- "inline-flex items-center gap-0.5 rounded-[8px] p-[3px]",
712
+ "inline-flex items-center gap-0.5 rounded-full p-[3px]",
714
713
  "bg-[var(--color-inactive,#DEDEDE)]",
715
714
  stretch && "w-full",
716
715
  className
@@ -728,13 +727,13 @@ function Switcher({
728
727
  "aria-checked": isSelected,
729
728
  onClick: () => handleSelect(val),
730
729
  className: cn(
731
- "inline-flex items-center justify-center gap-1.5 rounded-[6px]",
730
+ "inline-flex items-center justify-center gap-1.5 rounded-full",
732
731
  "px-4 py-[7px] cursor-pointer select-none",
733
732
  "font-['Inter'] text-[14px] font-medium leading-tight",
734
733
  "outline-none transition-colors duration-[120ms]",
735
734
  "focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-1",
736
735
  stretch && "flex-1",
737
- isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-transparent text-[var(--color-text-secondary,#6B7280)] hover:text-[var(--color-text-primary,#000)]"
736
+ isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-transparent text-[var(--color-text-primary,#000)] hover:bg-black/5"
738
737
  ),
739
738
  children: [
740
739
  icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 [&_svg]:size-[14px]", children: icon }),