kaze-design-system 0.1.1 → 0.2.0

package/components.css

@@ -3719,6 +3719,51 @@
   margin: var(--space-1) 0;
 }
 
+/* ── FilterPill ──────────────────────────────────────────── */
+.filter-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.5;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border);
+  background-color: var(--color-bg);
+  color: var(--color-fg-secondary);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  transition: background-color var(--duration-normal) var(--ease-default),
+              border-color var(--duration-normal) var(--ease-default),
+              color var(--duration-normal) var(--ease-default);
+}
+
+.filter-pill:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.filter-pill:focus-visible {
+  outline: var(--ring-width) solid var(--ring-color);
+  outline-offset: var(--ring-offset);
+}
+
+.filter-pill--active {
+  border-color: var(--filter-pill-color, var(--color-primary));
+  background-color: color-mix(in srgb, var(--filter-pill-color, var(--color-primary)) 8%, transparent);
+  color: var(--filter-pill-color, var(--color-fg));
+}
+
+.filter-pill__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background-color: var(--filter-pill-color, currentColor);
+  flex-shrink: 0;
+}
+
 /* ── Command Palette (additions) ────────────────────────── */
 
 .command-palette__group {

package/dist/components/FilterPill/FilterPill.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const FilterPill = forwardRef(
+  ({ active, color, dot, className, style, children, ...rest }, ref) => {
+    const pillStyle = color ? { ...style, "--filter-pill-color": color } : style;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "filter-pill",
+          active && "filter-pill--active",
+          className
+        ),
+        style: pillStyle,
+        "aria-pressed": active,
+        ...rest,
+        children: [
+          dot && /* @__PURE__ */ jsx("span", { className: "filter-pill__dot", "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+FilterPill.displayName = "FilterPill";
+export {
+  FilterPill
+};

package/dist/index.js

@@ -21,6 +21,7 @@ import { EmptyState } from "./components/EmptyState/EmptyState.js";
 import { FAB } from "./components/FAB/FAB.js";
 import { FAQ, FAQItem } from "./components/FAQ/FAQ.js";
 import { FeatureCard, FeatureGrid } from "./components/FeatureGrid/FeatureGrid.js";
+import { FilterPill } from "./components/FilterPill/FilterPill.js";
 import { FormField } from "./components/FormField/FormField.js";
 import { Grid } from "./components/Grid/Grid.js";
 import { Heading } from "./components/Heading/Heading.js";
@@ -97,6 +98,7 @@ export {
   FAQItem,
   FeatureCard,
   FeatureGrid,
+  FilterPill,
   FormField,
   Grid,
   Heading,

package/dist/lib/chartColors.js

@@ -4,7 +4,13 @@ const CHART_COLORS = [
   "var(--chart-purple)",
   "var(--chart-amber)",
   "var(--chart-red)",
-  "var(--chart-cyan)"
+  "var(--chart-cyan)",
+  "var(--chart-lime)",
+  "var(--chart-pink)",
+  "var(--chart-orange)",
+  "var(--chart-teal)",
+  "var(--chart-yellow)",
+  "var(--chart-green)"
 ];
 export {
   CHART_COLORS

package/dist/tokens.js

@@ -42,7 +42,13 @@ const chart = {
   purple: "var(--chart-purple)",
   amber: "var(--chart-amber)",
   red: "var(--chart-red)",
-  cyan: "var(--chart-cyan)"
+  cyan: "var(--chart-cyan)",
+  lime: "var(--chart-lime)",
+  pink: "var(--chart-pink)",
+  orange: "var(--chart-orange)",
+  teal: "var(--chart-teal)",
+  yellow: "var(--chart-yellow)",
+  green: "var(--chart-green)"
 };
 const space = {
   0: "var(--space-0)",

package/dist/types/components/FilterPill/FilterPill.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonHTMLAttributes } from "react";
+export interface FilterPillProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Whether the pill is in an active/selected state */
+    active?: boolean;
+    /** Dynamic accent color (CSS color value). Applied via --filter-pill-color custom property */
+    color?: string;
+    /** Show a colored dot indicator before the label */
+    dot?: boolean;
+}
+export declare const FilterPill: import("react").ForwardRefExoticComponent<FilterPillProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/FilterPill/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterPill } from "./FilterPill";
+export type { FilterPillProps } from "./FilterPill";

package/dist/types/components/index.d.ts

@@ -6,6 +6,8 @@ export { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } f
 export type { CardProps, CardVariant, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardBodyProps, CardFooterProps, } from "./Card";
 export { Badge } from "./Badge";
 export type { BadgeProps, BadgeVariant } from "./Badge";
+export { FilterPill } from "./FilterPill";
+export type { FilterPillProps } from "./FilterPill";
 export { Input } from "./Input";
 export type { InputProps } from "./Input";
 export { Select } from "./Select";

package/dist/types/lib/chartColors.d.ts

@@ -1,2 +1,2 @@
 /** Shared chart color palette using CSS custom properties */
-export declare const CHART_COLORS: readonly ["var(--chart-emerald)", "var(--chart-blue)", "var(--chart-purple)", "var(--chart-amber)", "var(--chart-red)", "var(--chart-cyan)"];
+export declare const CHART_COLORS: readonly ["var(--chart-emerald)", "var(--chart-blue)", "var(--chart-purple)", "var(--chart-amber)", "var(--chart-red)", "var(--chart-cyan)", "var(--chart-lime)", "var(--chart-pink)", "var(--chart-orange)", "var(--chart-teal)", "var(--chart-yellow)", "var(--chart-green)"];

package/dist/types/tokens/tokens.d.ts

@@ -47,6 +47,12 @@ export declare const chart: {
     readonly amber: "var(--chart-amber)";
     readonly red: "var(--chart-red)";
     readonly cyan: "var(--chart-cyan)";
+    readonly lime: "var(--chart-lime)";
+    readonly pink: "var(--chart-pink)";
+    readonly orange: "var(--chart-orange)";
+    readonly teal: "var(--chart-teal)";
+    readonly yellow: "var(--chart-yellow)";
+    readonly green: "var(--chart-green)";
 };
 export declare const space: {
     readonly 0: "var(--space-0)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaze-design-system",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "license": "MIT",

package/tokens.css

@@ -174,6 +174,20 @@
   --chart-yellow:   var(--yellow-500);
   --chart-green:    var(--green-500);
 
+  /* Numbered aliases for programmatic access */
+  --chart-1:  var(--chart-blue);
+  --chart-2:  var(--chart-emerald);
+  --chart-3:  var(--chart-amber);
+  --chart-4:  var(--chart-pink);
+  --chart-5:  var(--chart-cyan);
+  --chart-6:  var(--chart-red);
+  --chart-7:  var(--chart-lime);
+  --chart-8:  var(--chart-purple);
+  --chart-9:  var(--chart-orange);
+  --chart-10: var(--chart-teal);
+  --chart-11: var(--chart-yellow);
+  --chart-12: var(--chart-green);
+
   /* ── Typography ────────────────────────────────────────── */
   --font-sans: var(--font-montserrat, "Montserrat"), var(--font-noto-sans-jp, "Noto Sans JP"), -apple-system, BlinkMacSystemFont,
     "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,

package/utilities.css

@@ -164,6 +164,36 @@
 .tabular-nums { font-variant-numeric: tabular-nums; }
 .font-mono    { font-family: var(--font-mono); }
 
+/* ── Grid Presets ────────────────────────────────────────── */
+.grid--2-col {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+.grid--3-col {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+.grid--auto {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--space-4);
+}
+
+@media (max-width: 767px) {
+  .grid--2-col,
+  .grid--3-col {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Text Helpers ────────────────────────────────────────── */
+.text--secondary {
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-secondary);
+}
+
 /* ── Background Colors ───────────────────────────────────── */
 .bg-primary     { background-color: var(--color-bg); }
 .bg-secondary   { background-color: var(--color-bg-secondary); }