@sakaniui/react 0.8.3 → 0.8.5

package/README.md

@@ -8,9 +8,9 @@ An open-source, token-driven React component library for SaaS products — **1,5
 
 ---
 
-## Why Sakani
+## Why SakaniUI
 
-Most component libraries start in code and retrofit the design. Sakani was built the other way: every component is designed first in Figma with a strict three-layer token architecture, then implemented 1:1 in React — same variants, same states, same tokens. The Figma file has grown into a 1,500+ component-and-variant system across light and dark mode; the React library mirrors it component by component, with new ones landing as they're built out.
+Most component libraries start in code and retrofit the design. SakaniUI was built the other way: every component is designed first in Figma with a strict three-layer token architecture, then implemented 1:1 in React — same variants, same states, same tokens. The Figma file has grown into a 1,500+ component-and-variant system across light and dark mode; the React library mirrors it component by component, with new ones landing as they're built out.
 
 - **Token-driven** — components bind only to semantic tokens (`bg/surface`, `fg/muted`, `accent/default`…), so the entire library re-themes from one place
 - **Light & dark mode** — add the `.dark` class to any container; every component re-themes automatically, no per-component dark styles
@@ -69,13 +69,13 @@ Import the tokens once, then use any component from `@sakaniui/react`:
 ```tsx
 import '@sakaniui/react/tokens.css';
 import { Button, StatCard } from '@sakaniui/react';
-import { DollarSign } from 'lucide-react';
+import { IconCurrencyDollar } from '@sakaniui/react/icons';
 
 export const Dashboard = () => (
   <>
     <StatCard
       variant="icon"
-      icon={DollarSign}
+      icon={IconCurrencyDollar}
       title="Revenue"
       value="$48,120"
       delta="+12.5%"
@@ -97,7 +97,7 @@ export const Dashboard = () => (
 
 ## Glass & liquid glass
 
-Glass is built into the theme system, not added component by component. Next to light/dark, Sakani has a second axis — **Surface** — with three modes: **Solid** (the default), **Glass** (frosted translucency) and **Liquid** (Apple-style liquid glass: the backdrop *bends* at the edges like a lens, with a faint color fringe, rim light and depth). Components read a small set of `--surface-*` tokens, so switching an area from Solid to Glass or Liquid re-themes everything inside it at once — in the Figma file (variable modes and effect styles) and in code. Solid stays pixel-identical to before.
+Glass is built into the theme system, not added component by component. Next to light/dark, SakaniUI has a second axis — **Surface** — with three modes: **Solid** (the default), **Glass** (frosted translucency) and **Liquid** (Apple-style liquid glass: the backdrop *bends* at the edges like a lens, with a faint color fringe, rim light and depth). Components read a small set of `--surface-*` tokens, so switching an area from Solid to Glass or Liquid re-themes everything inside it at once — in the Figma file (variable modes and effect styles) and in code. Solid stays pixel-identical to before.
 
 ```tsx
 // Frosted glass: one attribute on any ancestor (works in light and dark)
@@ -205,7 +205,7 @@ Change a semantic token and every component follows — in both the design file
 
 ## Blocks (42)
 
-Blocks are full sections assembled from Sakani components — **composition examples**, not fully-configurable components like the ones above. Most ship with realistic sample data and manage their own demo state internally (a `state` prop just switches between the states each one ships with — loading, empty, error, and so on). They're meant as a working starting point you customize, not a drop-in you configure entirely through props.
+Blocks are full sections assembled from SakaniUI components — **composition examples**, not fully-configurable components like the ones above. Most ship with realistic sample data and manage their own demo state internally (a `state` prop just switches between the states each one ships with — loading, empty, error, and so on). They're meant as a working starting point you customize, not a drop-in you configure entirely through props.
 
 They live in `src/blocks`, and are also published separately from the main package at **`@sakaniui/react/blocks`** — kept out of the main entry point on purpose, so importing them is a deliberate choice:
 
@@ -258,7 +258,7 @@ The library ships with an audited AA baseline: contrast-checked token pairs in b
 
 ## Support
 
-If Sakani is useful to you, you can [tip the creator](https://csakani.gumroad.com/coffee). It funds the time that keeps the system maintained and growing.
+If SakaniUI is useful to you, you can [tip the creator](https://csakani.gumroad.com/coffee). It funds the time that keeps the system maintained and growing.
 
 ## Author
 
@@ -268,4 +268,4 @@ If Sakani is useful to you, you can [tip the creator](https://csakani.gumroad.co
 
 ## License
 
-MIT — free for personal and commercial use. If Sakani saves you time, a star ⭐ helps others find it.
+MIT — free for personal and commercial use. If SakaniUI saves you time, a star ⭐ helps others find it.

package/dist/{TopBar-DHp4nwwW.js → TopBar-n4mj0qZ2.js}

@@ -4510,19 +4510,19 @@ var jr = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: i })
 	className: zr.groupLabel,
 	children: e
 }), Z = {
-	header: "_header_6bhip_2",
-	"header--collapsed": "_header--collapsed_6bhip_12",
-	"header--workspace": "_header--workspace_6bhip_15",
-	header__subtitle: "_header__subtitle_6bhip_20",
-	header__switch: "_header__switch_6bhip_21",
-	header__logoWrap: "_header__logoWrap_6bhip_24",
-	header__logo: "_header__logo_6bhip_23",
-	header__logoContent: "_header__logoContent_6bhip_52",
-	header__logoIcon: "_header__logoIcon_6bhip_53",
-	header__text: "_header__text_6bhip_59",
-	"header__text--collapsed": "_header__text--collapsed_6bhip_70",
-	header__title: "_header__title_6bhip_74",
-	header__toggle: "_header__toggle_6bhip_76"
+	header: "_header_et3rf_2",
+	"header--collapsed": "_header--collapsed_et3rf_12",
+	"header--workspace": "_header--workspace_et3rf_15",
+	header__subtitle: "_header__subtitle_et3rf_20",
+	header__switch: "_header__switch_et3rf_21",
+	header__logoWrap: "_header__logoWrap_et3rf_24",
+	header__logo: "_header__logo_et3rf_23",
+	header__logoContent: "_header__logoContent_et3rf_52",
+	header__logoIcon: "_header__logoIcon_et3rf_53",
+	header__text: "_header__text_et3rf_59",
+	"header__text--collapsed": "_header__text--collapsed_et3rf_70",
+	header__title: "_header__title_et3rf_74",
+	header__toggle: "_header__toggle_et3rf_76"
 }, Vr = ({ type: e = "brand", title: t, subtitle: n, logo: r, collapsed: i, onToggle: a, toggleIcon: o = y }) => /* @__PURE__ */ M("div", {
 	className: [
 		Z.header,
@@ -4587,18 +4587,18 @@ var jr = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: i })
 		})
 	]
 }), Hr = {
-	item: "_item_1arxb_5",
-	"item--disabled": "_item--disabled_1arxb_37",
-	"item--active": "_item--active_1arxb_37",
-	"item--active-flat": "_item--active-flat_1arxb_37",
-	item__icon: "_item__icon_1arxb_38",
-	item__bar: "_item__bar_1arxb_49",
-	item__chevron: "_item__chevron_1arxb_82",
-	item__badge: "_item__badge_1arxb_84",
-	"item--collapsed": "_item--collapsed_1arxb_103",
-	item__label: "_item__label_1arxb_142",
-	"item__label--collapsed": "_item__label--collapsed_1arxb_151",
-	"item__chevron--expanded": "_item__chevron--expanded_1arxb_174"
+	item: "_item_873gi_5",
+	"item--disabled": "_item--disabled_873gi_37",
+	"item--active": "_item--active_873gi_37",
+	"item--active-flat": "_item--active-flat_873gi_37",
+	item__icon: "_item__icon_873gi_38",
+	item__bar: "_item__bar_873gi_49",
+	item__chevron: "_item__chevron_873gi_82",
+	item__badge: "_item__badge_873gi_84",
+	"item--collapsed": "_item--collapsed_873gi_103",
+	item__label: "_item__label_873gi_142",
+	"item__label--collapsed": "_item__label--collapsed_873gi_151",
+	"item__chevron--expanded": "_item__chevron--expanded_873gi_174"
 }, Ur = ({ icon: e, label: t, active: n, activeIndicator: r = !0, disabled: i, badge: a, hasSubmenu: o, collapsed: s, expanded: c, onClick: l, href: u, nativeTooltip: d = !0 }) => {
 	let f = n && r, m = n && !r, h = [
 		Hr.item,
@@ -4705,11 +4705,11 @@ var jr = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: i })
 		})
 	]
 }), Kr = {
-	subItem: "_subItem_1sz05_2",
-	"subItem--disabled": "_subItem--disabled_1sz05_26",
-	"subItem--active": "_subItem--active_1sz05_27",
-	subItem__dot: "_subItem__dot_1sz05_31",
-	subItem__label: "_subItem__label_1sz05_41"
+	subItem: "_subItem_1d7az_2",
+	"subItem--disabled": "_subItem--disabled_1d7az_26",
+	"subItem--active": "_subItem--active_1d7az_27",
+	subItem__dot: "_subItem__dot_1d7az_31",
+	subItem__label: "_subItem__label_1d7az_41"
 }, qr = ({ label: e, active: t, disabled: n, onClick: r, href: i }) => {
 	let a = {
 		className: [