@nild/components 0.0.17 → 0.0.18
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.
package/dist/switch/Switch.d.ts
CHANGED
|
@@ -1,16 +1,5 @@
|
|
|
1
|
-
import { ForwardRefExoticComponent,
|
|
2
|
-
import {
|
|
3
|
-
export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'> {
|
|
4
|
-
variant?: SwitchVariant;
|
|
5
|
-
size?: SwitchSize;
|
|
6
|
-
shape?: SwitchShape;
|
|
7
|
-
checked?: boolean;
|
|
8
|
-
defaultChecked?: boolean;
|
|
9
|
-
value?: boolean;
|
|
10
|
-
defaultValue?: boolean;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
onChange?: (checked: boolean) => void;
|
|
13
|
-
}
|
|
1
|
+
import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react';
|
|
2
|
+
import { SwitchProps, SwitchVariant, SwitchShape } from './interfaces';
|
|
14
3
|
/**
|
|
15
4
|
* @category Components
|
|
16
5
|
*/
|
|
@@ -19,7 +8,20 @@ declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTML
|
|
|
19
8
|
Unchecked: typeof Unchecked;
|
|
20
9
|
Thumb: typeof Thumb;
|
|
21
10
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
11
|
+
interface CheckedProps extends HTMLAttributes<HTMLDivElement> {
|
|
12
|
+
variant: SwitchVariant;
|
|
13
|
+
checked: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare const Checked: ForwardRefExoticComponent<CheckedProps & RefAttributes<HTMLDivElement>>;
|
|
16
|
+
interface UncheckedProps extends HTMLAttributes<HTMLDivElement> {
|
|
17
|
+
variant: SwitchVariant;
|
|
18
|
+
checked: boolean;
|
|
19
|
+
}
|
|
20
|
+
declare const Unchecked: ForwardRefExoticComponent<UncheckedProps & RefAttributes<HTMLDivElement>>;
|
|
21
|
+
interface ThumbProps extends HTMLAttributes<HTMLDivElement> {
|
|
22
|
+
variant: SwitchVariant;
|
|
23
|
+
shape: SwitchShape;
|
|
24
|
+
checked: boolean;
|
|
25
|
+
}
|
|
26
|
+
declare const Thumb: ForwardRefExoticComponent<ThumbProps & RefAttributes<HTMLDivElement>>;
|
|
25
27
|
export default Switch;
|
package/dist/switch/Switch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as M,jsx as d}from"react/jsx-runtime";import{useControllableState as R}from"@nild/hooks";import{cnMerge as p}from"@nild/shared";import{forwardRef as k,Children as T,isValidElement as U,cloneElement as y}from"react";import{switchClassNames as q,checkedClassNames as A,uncheckedClassNames as B,thumbClassNames as D}from"./style/index.js";const h=k(({className:i,children:r,variant:a="solid",size:s="medium",shape:c="round",checked:l,defaultChecked:f,value:w,defaultValue:b,disabled:g,onChange:C,style:S,...j},x)=>{let n,m,o;T.forEach(r,e=>{U(e)&&(e.type===v?n=e:e.type===u?m=e:e.type===N&&(o=e))});const E={"--nd-switch-height":{small:"calc(var(--spacing) * 4)",medium:"calc(var(--spacing) * 6)",large:"calc(var(--spacing) * 8)"}[s]},[t,V]=R(l??w,f??b??!1),z=()=>{V(e=>(C?.(!e),!e))};return M("button",{...j,type:"button",role:"switch","aria-checked":t,disabled:g,className:p(q({variant:a,size:s,shape:c}),i),style:{...E,...S},ref:x,onClick:z,children:[n?y(n,{...n.props,variant:a,checked:t}):d(v,{variant:a,checked:t}),m?y(m,{...m.props,variant:a,checked:t}):d(u,{variant:a,checked:t}),o?y(o,{...o.props,variant:a,shape:c,checked:t}):d(N,{variant:a,shape:c,checked:t})]})});h.displayName="Switch";const v=k(({className:i,children:r,variant:a,checked:s,...c},l)=>d("div",{...c,className:p(A({variant:a,checked:s}),i),ref:l,children:r}));v.displayName="Switch.Checked";const u=k(({className:i,children:r,variant:a,checked:s,...c},l)=>d("div",{...c,className:p(B({variant:a,checked:s}),i),ref:l,children:r}));u.displayName="Switch.Unchecked";const N=k(({className:i,children:r,variant:a,shape:s,checked:c,...l},f)=>d("div",{...l,className:p(D({variant:a,shape:s,checked:c}),i),ref:f,children:r}));N.displayName="Switch.Thumb",h.Checked=v,h.Unchecked=u,h.Thumb=N;export{h as default};
|
package/dist/switch/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export type { SwitchProps, SwitchVariant, SwitchSize, SwitchShape };
|
|
1
|
+
import { default as Switch } from './Switch';
|
|
2
|
+
export type * from './interfaces';
|
|
4
3
|
export default Switch;
|
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
5
|
-
export
|
|
6
|
-
export declare const SIZE_VAR_MAP: Record<SwitchSize, string>;
|
|
7
|
-
export declare const SIZE_CLS_MAP: Record<SwitchSize, string[]>;
|
|
8
|
-
export type SwitchShape = 'round' | 'square';
|
|
9
|
-
export declare const SHAPE_CLS_MAP: Record<SwitchShape, string[]>;
|
|
1
|
+
import { SwitchProps } from '../interfaces';
|
|
2
|
+
export declare const switchClassNames: (props?: SwitchProps | undefined) => string;
|
|
3
|
+
export declare const checkedClassNames: (props?: Pick<SwitchProps, "variant" | "checked"> | undefined) => string;
|
|
4
|
+
export declare const uncheckedClassNames: (props?: Pick<SwitchProps, "variant" | "checked"> | undefined) => string;
|
|
5
|
+
export declare const thumbClassNames: (props?: Pick<SwitchProps, "variant" | "shape" | "checked"> | undefined) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const r
|
|
1
|
+
import{cva as e}from"@nild/shared";import{DISABLED_CLS as r}from"../../_shared/style/index.js";const a=e(["nd-switch","group","h-[var(--nd-switch-height)]",["relative","inline-block","font-nd","overflow-hidden","cursor-pointer"],r],{variants:{variant:{solid:"",outlined:["border-solid","border","border-primary"]},size:{small:["min-w-8","text-sm"],medium:["min-w-10","text-md"],large:["min-w-12","text-lg"]},shape:{round:"rounded-full",square:"rounded-md"}}}),t=e(["h-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-contrast"],["ps-[calc(var(--nd-switch-height)/3)]","pe-[calc(var(--nd-switch-height)*1.1)]"]],{variants:{checked:{true:["ms-0","me-0"],false:["-ms-[100%]","me-[100%]"]}},compoundVariants:[{variant:"solid",checked:!0,className:["bg-primary","group-enabled:group-hover:bg-primary-hover"]},{variant:"solid",checked:!1,className:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},{variant:"outlined",className:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),s=e(["h-[var(--nd-switch-height)]","-mt-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-contrast"],["ps-[calc(var(--nd-switch-height)*1.1)]","pe-[calc(var(--nd-switch-height)/3)]"]],{variants:{checked:{true:["ms-[100%]","-me-[100%]"],false:["ms-0","me-0"]}},compoundVariants:[{variant:"solid",checked:!0,className:["bg-primary","group-enabled:group-hover:bg-primary-hover"]},{variant:"solid",checked:!1,className:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},{variant:"outlined",className:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),i=e(["h-[var(--nd-switch-height)]",["flex","justify-center","items-center"],["absolute","aspect-square","scale-80"],["text-contrast","transition-[left,background-color]"]],{variants:{variant:{solid:["bg-contrast","top-0"],outlined:["bg-primary","top-[50%]","-translate-y-[50%]","group-enabled:group-hover:bg-primary-hover"]},shape:{round:"rounded-full",square:"rounded-md"},checked:{true:"left-[calc(100%-var(--nd-switch-height))]",false:"left-0"}}});export{t as checkedClassNames,a as switchClassNames,i as thumbClassNames,s as uncheckedClassNames};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nild/components",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.18",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./dist/index.js",
|
|
7
7
|
"exports": {
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": ">=18.2.0",
|
|
33
33
|
"react-dom": ">=18.2.0",
|
|
34
|
-
"@nild/
|
|
34
|
+
"@nild/shared": "0.0.9",
|
|
35
35
|
"@nild/hooks": "0.0.11",
|
|
36
|
-
"@nild/
|
|
36
|
+
"@nild/icons": "0.0.10"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "vite build --mode PROD",
|