@kkkarsss/ui 1.4.3 → 1.4.4

package/dist/ui/controls/chip/chip.d.ts

@@ -7,6 +7,9 @@ type TProps = {
     onClick?: VoidFunction;
     accLeft?: FC<LucideProps>;
     children: ReactElement<TTypoProps>;
+    value?: string | number;
+    defaultValue?: string | number;
+    onDefaultClick?: VoidFunction;
 };
 export declare const Chip: FC<TProps>;
 export {};

package/dist/ui/controls/chip/chip.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { animated, config, useSpring } from '@react-spring/web';
+import { X } from 'lucide-react';
 import { Activity, createElement, useState } from 'react';
 import { jc } from '../../../utils';
 const variantMap = {
@@ -7,11 +8,17 @@ const variantMap = {
     accent: 'bg-accent text-accent-foreground',
     secondary: 'bg-transparent text-secondary-foreground border border-secondary-foreground',
 };
-export const Chip = ({ children, onClick, accLeft, variant = 'default' }) => {
+export const Chip = ({ children, onClick, accLeft, variant = 'default', value, defaultValue, onDefaultClick, }) => {
     const [pressed, setPressed] = useState(false);
     const springs = useSpring({
         transform: pressed ? 'scale(0.95)' : 'scale(1)',
         config: config.stiff,
     });
-    return (_jsxs(animated.button, { style: springs, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onClick: onClick, className: jc('flex items-center text-nowrap gap-[5px] w-min px-2 py-1 rounded-2xl outline-none border-none cursor-pointer text-[14px]', variantMap[variant]), children: [_jsx(Activity, { mode: accLeft ? 'visible' : 'hidden', children: accLeft ? createElement(accLeft, { size: 14, color: 'white', strokeWidth: 3 }) : null }), children] }));
+    const isDefaulted = defaultValue !== undefined && value === defaultValue;
+    const showReset = defaultValue !== undefined && value !== defaultValue;
+    const currentVariant = defaultValue !== undefined ? (isDefaulted ? 'default' : 'accent') : variant;
+    return (_jsxs(animated.button, { style: springs, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onClick: onClick, className: jc('flex items-center text-nowrap gap-[5px] w-min px-2 py-1 rounded-2xl outline-none border-none cursor-pointer text-[14px]', variantMap[currentVariant]), children: [_jsx(Activity, { mode: accLeft ? 'visible' : 'hidden', children: accLeft ? createElement(accLeft, { size: 14, color: 'white', strokeWidth: 3 }) : null }), children, _jsx(Activity, { mode: showReset ? 'visible' : 'hidden', children: _jsx(X, { size: 14, color: currentVariant === 'accent' ? 'white' : 'black', strokeWidth: 3, onClick: (e) => {
+                        e.stopPropagation();
+                        onDefaultClick?.();
+                    } }) })] }));
 };

package/dist/ui/controls/chip/chip.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const Accent: Story;
 export declare const Secondary: Story;
 export declare const WithIcon: Story;
+export declare const DefaultValue: Story;

package/dist/ui/controls/chip/chip.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Mail } from 'lucide-react';
+import { useState } from 'react';
 import { Chip } from './chip';
 import { Typo } from '../../information';
 const meta = {
@@ -40,3 +41,9 @@ export const WithIcon = {
         variant: 'accent',
     },
 };
+export const DefaultValue = {
+    render: (args) => {
+        const [value, setValue] = useState('initial');
+        return (_jsx(Chip, { ...args, value: value, defaultValue: "default", onDefaultClick: () => setValue('default'), onClick: () => setValue('modified'), children: _jsx(Typo, { children: value }) }));
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkkarsss/ui",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",