@okshaun/components 1.0.0 → 1.0.2

package/dist/styles/global.css

@@ -51,7 +51,7 @@
     pointer-events: none;
 }
 
-  *:is(:focus-visible, [data-focus-visible]=true),*::before:is(:focus-visible, [data-focus-visible]=true),*::after:is(:focus-visible, [data-focus-visible]=true) {
+  *:is(:focus-visible, [data-focus-visible=true]),*::before:is(:focus-visible, [data-focus-visible=true]),*::after:is(:focus-visible, [data-focus-visible=true]) {
     border-color: var(--oks-colors-border-focused);
 }
 

package/dist/styles/recipes/avatar.css

@@ -39,7 +39,7 @@
 }
 
     .oks-avatar__presence,.oks-avatar__status {
-      border-radius: full;
+      border-radius: var(--oks-radii-999);
       border-width: var(--oks-border-widths-2);
       border-style: solid;
       border-color: bg;

package/dist/styles/recipes/breadcrumbs.css

@@ -23,7 +23,7 @@
       color: var(--oks-colors-gray-60);
 }
 
-    .oks-breadcrumbs a:is(:focus-visible, [data-focus-visible]=true) {
+    .oks-breadcrumbs a:is(:focus-visible, [data-focus-visible=true]) {
       color: var(--oks-colors-blue-50);
 }
 

package/dist/styles/recipes/button.css

@@ -56,7 +56,7 @@
       fill: var(--oks-colors-icon-selected);
 }
 
-    .oks-button__container:is(:focus-visible, [data-focus-visible]=true) {
+    .oks-button__container:is(:focus-visible, [data-focus-visible=true]) {
       outline-color: var(--oks-colors-border-focused);
 }
 

package/dist/styles/recipes/checkbox.css

@@ -69,7 +69,7 @@
       display: none;
 }
 
-    .oks-checkbox__input:is(:focus-visible, [data-focus-visible]=true) ~ [name='checkbox-focus'] {
+    .oks-checkbox__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='checkbox-focus'] {
       display: inline-grid;
       position: absolute;
       fill: var(--oks-colors-border-focused);

package/dist/styles/recipes/chip.css

@@ -72,7 +72,7 @@
       opacity: 0.6;
 }
 
-    .oks-chip__container:is(:focus-visible, [data-focus-visible]=true) {
+    .oks-chip__container:is(:focus-visible, [data-focus-visible=true]) {
       outline-color: var(--oks-colors-border-focused);
 }
 

package/dist/styles/recipes/divider.css

@@ -2,15 +2,12 @@
   @layer _base {
     .oks-divider {
       --divider-weight: var(--oks-sizes-1);
+      border-style: solid;
       border-color: var(--oks-colors-current);
-      color: var(--oks-colors-gray-20);
+      color: border.default;
       min-width: var(--oks-sizes-1);
       min-height: var(--oks-sizes-1);
 }
-
-    .dark .oks-divider,.oks-divider:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-divider {
-      color: var(--oks-colors-gray-80);
-}
 }
 
   .oks-divider--direction_horizontal {

package/dist/styles/recipes/icon-button.css

@@ -56,7 +56,7 @@
       fill: var(--oks-colors-icon-selected);
 }
 
-    .oks-iconButton__container:is(:focus-visible, [data-focus-visible]=true) {
+    .oks-iconButton__container:is(:focus-visible, [data-focus-visible=true]) {
       outline-color: var(--oks-colors-border-focused);
 }
 

package/dist/styles/recipes/menu.css

@@ -38,7 +38,7 @@
       pointer-events: none;
 }
 
-    .oks-menu__menuItem:is(:focus-visible, [data-focus-visible]=true) {
+    .oks-menu__menuItem:is(:focus-visible, [data-focus-visible=true]) {
       background: var(--oks-colors-surface-overlay-hovered);
 }
 

package/dist/styles/recipes/radio.css

@@ -57,13 +57,13 @@
       display: none;
 }
 
-    .oks-radio__input:is(:focus-visible, [data-focus-visible]=true) ~ [name='radio-focus'] {
+    .oks-radio__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='radio-focus'] {
       display: inline-grid;
       position: absolute;
       fill: var(--oks-colors-gray-90);
 }
 
-    .dark .oks-radio__input:is(:focus-visible, [data-focus-visible]=true) ~ [name='radio-focus'],.oks-radio__input:is(:focus-visible, [data-focus-visible]=true) ~ [name='radio-focus']:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-radio__input:is(:focus-visible, [data-focus-visible]=true) ~ [name='radio-focus'] {
+    .dark .oks-radio__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='radio-focus'],.oks-radio__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='radio-focus']:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-radio__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='radio-focus'] {
       fill: gray.1;
 }
 

package/dist/styles/recipes/toggle.css

@@ -50,7 +50,7 @@
       --transition-easing: ease-in-out;
 }
 
-    .oks-toggle__input:is(:focus-visible, [data-focus-visible]=true) {
+    .oks-toggle__input:is(:focus-visible, [data-focus-visible=true]) {
       border-radius: 24px;
       appearance: none;
       -webkit-appearance: none;
@@ -63,7 +63,7 @@
       height: var(--oks-sizes-24);
 }
 
-    .dark .oks-toggle__input:is(:focus-visible, [data-focus-visible]=true),.oks-toggle__input:is(:focus-visible, [data-focus-visible]=true):is([data-color-mode=dark] *),[data-color-mode=dark] .oks-toggle__input:is(:focus-visible, [data-focus-visible]=true) {
+    .dark .oks-toggle__input:is(:focus-visible, [data-focus-visible=true]),.oks-toggle__input:is(:focus-visible, [data-focus-visible=true]):is([data-color-mode=dark] *),[data-color-mode=dark] .oks-toggle__input:is(:focus-visible, [data-focus-visible=true]) {
       outline-color: var(--oks-colors-gray-10);
 }
 

package/dist/styles/utilities.css

@@ -846,14 +846,14 @@
     font-size: 18px;
 }
 
-  .oks-c_text\.disabled {
-    color: var(--oks-colors-text-disabled);
-}
-
   .oks-c_text {
     color: var(--oks-colors-text);
 }
 
+  .oks-c_text\.disabled {
+    color: var(--oks-colors-text-disabled);
+}
+
   .oks-lh_none {
     line-height: var(--oks-line-heights-none);
 }
@@ -1635,23 +1635,23 @@
     transform: rotate(180deg);
 }
 
-  .focusVisible\:oks-bg_surface:is(:focus-visible, [data-focus-visible]=true) {
+  .focusVisible\:oks-bg_surface:is(:focus-visible, [data-focus-visible=true]) {
     background: var(--oks-colors-surface);
 }
 
-  .focusVisible\:oks-bd-w_1:is(:focus-visible, [data-focus-visible]=true) {
+  .focusVisible\:oks-bd-w_1:is(:focus-visible, [data-focus-visible=true]) {
     border-width: var(--oks-border-widths-1);
 }
 
-  .focusVisible\:oks-bd-c_border\.focused:is(:focus-visible, [data-focus-visible]=true) {
+  .focusVisible\:oks-bd-c_border\.focused:is(:focus-visible, [data-focus-visible=true]) {
     border-color: var(--oks-colors-border-focused);
 }
 
-  .focusVisible\:oks-bx-sh_elevated:is(:focus-visible, [data-focus-visible]=true) {
+  .focusVisible\:oks-bx-sh_elevated:is(:focus-visible, [data-focus-visible=true]) {
     box-shadow: var(--oks-shadows-elevated);
 }
 
-  .focusVisible\:oks-ring-c_border\.focused:is(:focus-visible, [data-focus-visible]=true) {
+  .focusVisible\:oks-ring-c_border\.focused:is(:focus-visible, [data-focus-visible=true]) {
     outline-color: var(--oks-colors-border-focused);
 }
 

package/dist/svgs/building.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M18.25 19.5v-15h1.25V3.25h-15V4.5h1.25v15H3v1.25h18V19.5zM7.75 6.37h3.12v1.25H7.75zm0 3.13h3.12v1.25H7.75zm0 3.13h3.12v1.25H7.75zm6.13 6.87h-3.75v-3.12h3.75zm2.37-5.63h-3.12v-1.25h3.12zm0-3.12h-3.12V9.5h3.12zm0-3.12h-3.12V6.38h3.12z" clip-rule="evenodd"/></svg>

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import { ChangeEventHandler } from 'react';
 import { Component } from 'react';
 import { ComponentPropsWithRef } from 'react';
@@ -106,7 +107,7 @@ export declare type AutocompleteProps = MenuVariantProps & {
     /** Callback when input value changes */
     onChange: (value: string) => void;
     /** Size of the input */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: "sm" | "md" | "lg" | "xl";
     /** Available options to filter and display */
     options: AutocompleteOption[];
     /** Callback when an option is selected */
@@ -128,7 +129,7 @@ export declare type AutocompleteProps = MenuVariantProps & {
     /** Message to show when no options match */
     noResultsMessage?: string;
     /** Props to pass to the TextInput */
-    inputProps?: Omit<TextInputProps, 'name' | 'value' | 'onChange' | 'disabled' | 'error' | 'id'>;
+    inputProps?: Omit<TextInputProps, "name" | "value" | "onChange" | "disabled" | "error" | "id">;
 };
 
 /**
@@ -194,12 +195,9 @@ declare type AvatarVariantProps = {
  * - Without count prop: shows as dot
  * - With count prop: shows the number (or "99+" if exceeds overflowCount)
  */
-export declare const Badge: {
-    (props: BadgeProps): JSX.Element | null;
-    displayName: string;
-};
+export declare const Badge: (props: BadgeProps) => JSX.Element | null;
 
-export declare type BadgeProps = BoxProps & Omit<BadgeVariantProps, 'standalone' | 'dot'> & {
+export declare type BadgeProps = Omit<BoxProps, keyof BadgeVariantProps> & Omit<BadgeVariantProps, 'standalone' | 'dot'> & {
     /** Number to show in badge. If provided, switches to count mode. */
     count?: number;
     /** Show badge when count is zero. Default: false */
@@ -208,10 +206,8 @@ export declare type BadgeProps = BoxProps & Omit<BadgeVariantProps, 'standalone'
     overflowCount?: number;
     /** Color scheme of the badge. Default: 'danger' */
     variant?: BadgeVariant;
-    /** Additional class name */
-    className?: string;
     /** Content to wrap with the badge */
-    children?: React_2.ReactNode;
+    children?: React.ReactNode;
 };
 
 export declare type BadgeVariant = 'neutral' | 'inverted' | 'subtle' | 'subtle-inverted' | 'success' | 'danger' | 'warning' | 'info';
@@ -369,7 +365,7 @@ export declare const Checkbox: (props: CheckboxProps) => JSX.Element;
  * @example
  * const handleChange: CheckboxChangeHandler = (e) => setChecked(e.target.checked);
  */
-export declare type CheckboxChangeEvent = React.ChangeEvent<HTMLInputElement>;
+export declare type CheckboxChangeEvent = ChangeEvent<HTMLInputElement>;
 
 /**
  * Helper type for checkbox change handler functions
@@ -508,7 +504,7 @@ declare interface Conditions {
     	"_focus": string
     	/** `&:focus-within` */
     	"_focusWithin": string
-    	/** `&:is(:focus-visible, [data-focus-visible]=true)` */
+    	/** `&:is(:focus-visible, [data-focus-visible=true])` */
     	"_focusVisible": string
     	/** `&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])` */
     	"_disabled": string
@@ -1254,10 +1250,7 @@ declare type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit
 
 export declare const Divider: (props: DividerProps) => JSX.Element;
 
-export declare type DividerProps = Omit<BoxProps, keyof DividerVariantProps> & DividerVariantProps & {
-    direction?: string;
-    weight?: string;
-};
+export declare type DividerProps = Omit<BoxProps, keyof DividerVariantProps> & DividerVariantProps;
 
 declare interface DividerVariant {
     /**
@@ -1427,7 +1420,7 @@ export declare const IconNames: {
     readonly bookmark: "bookmark";
     readonly bookmarks: "bookmarks";
     readonly broadcast: "broadcast";
-    readonly Building: "Building";
+    readonly building: "building";
     readonly 'calendar-add': "calendar-add";
     readonly 'calendar-view-day': "calendar-view-day";
     readonly 'calendar-view-month': "calendar-view-month";
@@ -1689,7 +1682,7 @@ export declare const IconNames: {
     readonly 'zoom-out': "zoom-out";
 };
 
-declare type IconNamesList = 'aa-placeholder' | 'alarm' | 'alt-route' | 'apps' | 'arrow-bubble' | 'arrow-down' | 'arrow-drop-down' | 'arrow-drop-up' | 'arrow-left' | 'arrow-line-down' | 'arrow-line-left' | 'arrow-line-right' | 'arrow-line-up' | 'arrow-prompt' | 'arrow-redo' | 'arrow-right' | 'arrow-square-in' | 'arrow-square-out' | 'arrow-undo' | 'arrow-up' | 'arrows-down-up' | 'arrows-left-right' | 'asterisk' | 'at' | 'attachment' | 'bank' | 'barcode-reader' | 'barcode' | 'barricade' | 'basket' | 'bell-active' | 'bell-slash' | 'bell' | 'bin' | 'blog-post' | 'blueprint' | 'book-a' | 'book' | 'bookmark-outlined' | 'bookmark' | 'bookmarks' | 'broadcast' | 'Building' | 'calendar-add' | 'calendar-view-day' | 'calendar-view-month' | 'calendar-view-week' | 'calendar' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'cart' | 'certificate' | 'check-all' | 'check-thick' | 'check' | 'checkbox-checked' | 'checkbox-focus' | 'checkbox-indeterminate' | 'checkbox' | 'chevron-down' | 'chevron-filled-down' | 'chevron-filled-left' | 'chevron-filled-right' | 'chevron-filled-up' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-change' | 'circle-check' | 'circle' | 'circles-add' | 'circuit' | 'clipboard' | 'clock-countdown' | 'clock' | 'cloud-synced' | 'code' | 'color' | 'compass' | 'cone' | 'confetti' | 'copy' | 'credit-card' | 'cube-focus' | 'cursor-click' | 'cursor' | 'cut' | 'data-object' | 'database' | 'devices' | 'dictionary' | 'dna' | 'donut' | 'dot' | 'dots' | 'download-cloud' | 'download' | 'edit' | 'encrypted' | 'envelope' | 'equal' | 'eraser' | 'error' | 'event-list' | 'export' | 'extension' | 'eye-slash' | 'eye' | 'faq' | 'file-add' | 'file' | 'files' | 'filter-remove' | 'filter' | 'finish' | 'fit-screen' | 'flag-checkered' | 'flag' | 'forklift' | 'fullscreen-exit' | 'fullscreen' | 'garage' | 'gauge' | 'globe-grid' | 'globe' | 'gripper' | 'handle-vertical' | 'handle' | 'hash' | 'heart-outlined' | 'heart' | 'help' | 'history' | 'home' | 'image' | 'images' | 'inbox' | 'infinity' | 'info' | 'inventory' | 'invoice' | 'jump-back' | 'jump-forward' | 'kanban' | 'kbd-backspace' | 'kbd-capslock' | 'kbd-command' | 'kbd-control' | 'kbd-hide' | 'kbd-option' | 'kbd-return' | 'kbd-shift' | 'kbd-space' | 'kbd' | 'lightning' | 'line-segment' | 'line-segments' | 'link-slash' | 'link' | 'linked-services' | 'list-bullets' | 'list-checks' | 'list-numbers' | 'lock-open' | 'lock' | 'map-pin' | 'map' | 'mark-unread' | 'menu-close' | 'menu' | 'message' | 'messages' | 'minus-thick' | 'minus' | 'money' | 'monitor' | 'moon' | 'navigation' | 'network-x' | 'network' | 'newspaper-clipping' | 'newspaper' | 'note-stack' | 'note' | 'notepad' | 'notification' | 'nut' | 'order' | 'package' | 'page-first' | 'page-last' | 'parts' | 'password' | 'path' | 'pause' | 'pencil' | 'percent' | 'play-pause' | 'play' | 'plus' | 'printer' | 'prohibit' | 'question-mark' | 'quote' | 'radio-checked' | 'radio-focus' | 'radio' | 'read-doc' | 'receipt' | 'recycle' | 'refresh' | 'repeat' | 'reply-all' | 'reply' | 'resize' | 'ribbon' | 'rows-add' | 'ruler' | 'rules' | 'scale' | 'schedule-backward' | 'schedule-forward' | 'screwdriver' | 'scroll' | 'search-check' | 'search-items' | 'search-objects' | 'search' | 'send' | 'settings' | 'shapes' | 'share' | 'shuffle' | 'signpost' | 'skip-back' | 'skip-forward' | 'skull' | 'sliders' | 'sort-alpha-down' | 'sort-alpha-up' | 'sort-ascending' | 'sort-descending' | 'sort-time-down' | 'sort-time-up' | 'square-add' | 'square-inside' | 'square-select' | 'square' | 'stamp' | 'star-outlined' | 'star' | 'start' | 'step' | 'stop' | 'story' | 'strategy' | 'success' | 'sun' | 'support' | 'sync' | 'tag' | 'target-2' | 'target' | 'task-alt' | 'text-add' | 'textbox' | 'time-add' | 'timer' | 'toolbox' | 'tools' | 'trash' | 'trophy' | 'truck-trailer' | 'update' | 'upload-cloud' | 'upload' | 'user-add' | 'user-details' | 'user-group' | 'user-id-badge' | 'user-id-card' | 'user-recent' | 'user' | 'verified' | 'video' | 'view-cards' | 'view-doc' | 'view-grid' | 'view-rows' | 'view-table' | 'wand' | 'warning' | 'weight' | 'widgets' | 'work-order' | 'wrench-2' | 'wrench' | 'x' | 'zoom-in' | 'zoom-out'
+declare type IconNamesList = 'aa-placeholder' | 'alarm' | 'alt-route' | 'apps' | 'arrow-bubble' | 'arrow-down' | 'arrow-drop-down' | 'arrow-drop-up' | 'arrow-left' | 'arrow-line-down' | 'arrow-line-left' | 'arrow-line-right' | 'arrow-line-up' | 'arrow-prompt' | 'arrow-redo' | 'arrow-right' | 'arrow-square-in' | 'arrow-square-out' | 'arrow-undo' | 'arrow-up' | 'arrows-down-up' | 'arrows-left-right' | 'asterisk' | 'at' | 'attachment' | 'bank' | 'barcode-reader' | 'barcode' | 'barricade' | 'basket' | 'bell-active' | 'bell-slash' | 'bell' | 'bin' | 'blog-post' | 'blueprint' | 'book-a' | 'book' | 'bookmark-outlined' | 'bookmark' | 'bookmarks' | 'broadcast' | 'building' | 'calendar-add' | 'calendar-view-day' | 'calendar-view-month' | 'calendar-view-week' | 'calendar' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'cart' | 'certificate' | 'check-all' | 'check-thick' | 'check' | 'checkbox-checked' | 'checkbox-focus' | 'checkbox-indeterminate' | 'checkbox' | 'chevron-down' | 'chevron-filled-down' | 'chevron-filled-left' | 'chevron-filled-right' | 'chevron-filled-up' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-change' | 'circle-check' | 'circle' | 'circles-add' | 'circuit' | 'clipboard' | 'clock-countdown' | 'clock' | 'cloud-synced' | 'code' | 'color' | 'compass' | 'cone' | 'confetti' | 'copy' | 'credit-card' | 'cube-focus' | 'cursor-click' | 'cursor' | 'cut' | 'data-object' | 'database' | 'devices' | 'dictionary' | 'dna' | 'donut' | 'dot' | 'dots' | 'download-cloud' | 'download' | 'edit' | 'encrypted' | 'envelope' | 'equal' | 'eraser' | 'error' | 'event-list' | 'export' | 'extension' | 'eye-slash' | 'eye' | 'faq' | 'file-add' | 'file' | 'files' | 'filter-remove' | 'filter' | 'finish' | 'fit-screen' | 'flag-checkered' | 'flag' | 'forklift' | 'fullscreen-exit' | 'fullscreen' | 'garage' | 'gauge' | 'globe-grid' | 'globe' | 'gripper' | 'handle-vertical' | 'handle' | 'hash' | 'heart-outlined' | 'heart' | 'help' | 'history' | 'home' | 'image' | 'images' | 'inbox' | 'infinity' | 'info' | 'inventory' | 'invoice' | 'jump-back' | 'jump-forward' | 'kanban' | 'kbd-backspace' | 'kbd-capslock' | 'kbd-command' | 'kbd-control' | 'kbd-hide' | 'kbd-option' | 'kbd-return' | 'kbd-shift' | 'kbd-space' | 'kbd' | 'lightning' | 'line-segment' | 'line-segments' | 'link-slash' | 'link' | 'linked-services' | 'list-bullets' | 'list-checks' | 'list-numbers' | 'lock-open' | 'lock' | 'map-pin' | 'map' | 'mark-unread' | 'menu-close' | 'menu' | 'message' | 'messages' | 'minus-thick' | 'minus' | 'money' | 'monitor' | 'moon' | 'navigation' | 'network-x' | 'network' | 'newspaper-clipping' | 'newspaper' | 'note-stack' | 'note' | 'notepad' | 'notification' | 'nut' | 'order' | 'package' | 'page-first' | 'page-last' | 'parts' | 'password' | 'path' | 'pause' | 'pencil' | 'percent' | 'play-pause' | 'play' | 'plus' | 'printer' | 'prohibit' | 'question-mark' | 'quote' | 'radio-checked' | 'radio-focus' | 'radio' | 'read-doc' | 'receipt' | 'recycle' | 'refresh' | 'repeat' | 'reply-all' | 'reply' | 'resize' | 'ribbon' | 'rows-add' | 'ruler' | 'rules' | 'scale' | 'schedule-backward' | 'schedule-forward' | 'screwdriver' | 'scroll' | 'search-check' | 'search-items' | 'search-objects' | 'search' | 'send' | 'settings' | 'shapes' | 'share' | 'shuffle' | 'signpost' | 'skip-back' | 'skip-forward' | 'skull' | 'sliders' | 'sort-alpha-down' | 'sort-alpha-up' | 'sort-ascending' | 'sort-descending' | 'sort-time-down' | 'sort-time-up' | 'square-add' | 'square-inside' | 'square-select' | 'square' | 'stamp' | 'star-outlined' | 'star' | 'start' | 'step' | 'stop' | 'story' | 'strategy' | 'success' | 'sun' | 'support' | 'sync' | 'tag' | 'target-2' | 'target' | 'task-alt' | 'text-add' | 'textbox' | 'time-add' | 'timer' | 'toolbox' | 'tools' | 'trash' | 'trophy' | 'truck-trailer' | 'update' | 'upload-cloud' | 'upload' | 'user-add' | 'user-details' | 'user-group' | 'user-id-badge' | 'user-id-card' | 'user-recent' | 'user' | 'verified' | 'video' | 'view-cards' | 'view-doc' | 'view-grid' | 'view-rows' | 'view-table' | 'wand' | 'warning' | 'weight' | 'widgets' | 'work-order' | 'wrench-2' | 'wrench' | 'x' | 'zoom-in' | 'zoom-out'
 
 export declare type IconProps = Omit<BoxProps, 'size'> & SVGAttributes<SVGElement> & {
     name: IconNamesList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okshaun/components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A comprehensive React component library with Panda CSS theming",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,14 +10,16 @@
     "prepare": "npx panda codegen",
     "dev": "npx panda codegen --watch & vite",
     "build": "rm -rf dist && PANDA_STATIC=true npx panda codegen && npx panda cssgen --splitting && npx panda spec && npx panda init-mcp --client claude && vite build",
-    "lint": "eslint .",
+    "lint": "biome lint src/",
+    "check": "biome check --write src/",
+    "doctor": "npx -y react-doctor@latest .",
     "preview": "vite preview",
     "generate-sprite": "node src/utils/generate-sprite.js",
     "storybook": "PANDA_STATIC=true storybook dev -p 6006",
     "storybook:build": "PANDA_STATIC=true storybook build",
     "panda-mcp": "npx panda mcp",
     "prepublishOnly": "npm run build",
-    "format": "prettier --write 'src/**/*.{ts,tsx}'"
+    "format": "biome format --write src/"
   },
   "files": [
     "./dist/",
@@ -58,7 +60,7 @@
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
+    "@biomejs/biome": "^1.9.4",
     "@fontsource-variable/piazzolla": "^5.2.8",
     "@fontsource/ibm-plex-mono": "^5.2.7",
     "@fontsource/ibm-plex-sans": "^5.2.8",
@@ -74,30 +76,16 @@
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.11.2",
     "gh-pages": "^6.2.0",
-    "globals": "^15.14.0",
     "postcss": "^8.5.1",
-    "prettier": "^3.3.3",
     "storybook": "^8.6.15",
     "svg-sprite": "^2.0.4",
     "svgo": "^3.0.2",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.54.0",
     "vite": "^6.0.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.4"
   },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  },
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",