@ladder-ui/toggle 0.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ivan Avila
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Toggle, type ToggleProps, type ToggleVariant, type ToggleSize, } from "./toggle";
+export { ToggleGroup, type ToggleGroupProps, type ToggleGroupType, } from "./toggle";
+export { Toggle as default } from "./toggle";

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),l=require("@ladder-ui/core/concatClassNames");const t=a.createContext(null);function r({ref:r,className:i,pressed:s,defaultPressed:o=!1,onPressedChange:d,variant:u="default",size:n="md",value:c,disabled:g,children:v,onClick:p,...f}){const y=a.use(t),h=null!==y,[m,x]=a.useState(o);let b;if(h&&void 0!==c){const e=y.value;b=Array.isArray(e)?e.includes(c):e===c}else b=void 0!==s?s:m;const C=h?y.variant:u,N=h?y.size:n,z=g??(!!h&&y.disabled);return e.jsx("button",{ref:r,type:"button",role:"switch","aria-checked":b,"data-slot":"toggle","data-variant":C,"data-size":N,"data-state":b?"on":"off",disabled:z,className:l("lui-toggle",`lui-toggle--${C}`,`lui-toggle--${N}`,b&&"lui-toggle--pressed",i),onClick:e=>{if(h)void 0!==c&&y.onValueChange(c);else{const e=!b;void 0===s&&x(e),d?.(e)}p?.(e)},...f,children:v})}function i({ref:r,className:i,type:s,value:o,defaultValue:d,onValueChange:u,variant:n="default",size:c="md",disabled:g=!1,direction:v="horizontal",children:p,...f}){const[y,h]=a.useState(()=>void 0!==o?o:void 0!==d?d:"multiple"===s?[]:""),m=void 0!==o?o:y,x={value:m,type:s,onValueChange:e=>{if("multiple"===s){const a=Array.isArray(m)?m:[],l=a.includes(e)?a.filter(a=>a!==e):[...a,e];void 0===o&&h(l),u?.(l)}else{const a=(Array.isArray(m)?"":m)===e?"":e;void 0===o&&h(a),u?.(a)}},variant:n,size:c,disabled:g};return e.jsx(t,{value:x,children:e.jsx("div",{ref:r,role:"group","data-slot":"toggle-group","data-type":s,className:l("lui-toggle-group","vertical"===v&&"lui-toggle-group--vertical",i),...f,children:p})})}r.displayName="Toggle",i.displayName="ToggleGroup",exports.Toggle=r,exports.ToggleGroup=i,exports.default=r;

package/dist/index.mjs

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{createContext as a,use as l,useState as i}from"react";import t from"@ladder-ui/core/concatClassNames";const o=a(null);function r({ref:a,className:r,pressed:s,defaultPressed:d=!1,onPressedChange:n,variant:u="default",size:c="md",value:g,disabled:v,children:f,onClick:p,...m}){const h=l(o),y=null!==h,[b,C]=i(d);let N;if(y&&void 0!==g){const e=h.value;N=Array.isArray(e)?e.includes(g):e===g}else N=void 0!==s?s:b;const z=y?h.variant:u,A=y?h.size:c,V=v??(!!y&&h.disabled);return e("button",{ref:a,type:"button",role:"switch","aria-checked":N,"data-slot":"toggle","data-variant":z,"data-size":A,"data-state":N?"on":"off",disabled:V,className:t("lui-toggle",`lui-toggle--${z}`,`lui-toggle--${A}`,N&&"lui-toggle--pressed",r),onClick:e=>{if(y)void 0!==g&&h.onValueChange(g);else{const e=!N;void 0===s&&C(e),n?.(e)}p?.(e)},...m,children:f})}function s({ref:a,className:l,type:r,value:s,defaultValue:d,onValueChange:n,variant:u="default",size:c="md",disabled:g=!1,direction:v="horizontal",children:f,...p}){const[m,h]=i(()=>void 0!==s?s:void 0!==d?d:"multiple"===r?[]:""),y=void 0!==s?s:m;return e(o,{value:{value:y,type:r,onValueChange:e=>{if("multiple"===r){const a=Array.isArray(y)?y:[],l=a.includes(e)?a.filter(a=>a!==e):[...a,e];void 0===s&&h(l),n?.(l)}else{const a=(Array.isArray(y)?"":y)===e?"":e;void 0===s&&h(a),n?.(a)}},variant:u,size:c,disabled:g},children:e("div",{ref:a,role:"group","data-slot":"toggle-group","data-type":r,className:t("lui-toggle-group","vertical"===v&&"lui-toggle-group--vertical",l),...p,children:f})})}r.displayName="Toggle",s.displayName="ToggleGroup";export{r as Toggle,s as ToggleGroup,r as default};

package/dist/toggle.css

@@ -0,0 +1 @@
+@layer components{.lui-toggle{align-items:center;border:1px solid transparent;border-radius:var(--lui-toggle-radius);cursor:pointer;display:inline-flex;font-family:var(--lui-font-family);font-size:var(--lui-toggle-font-size-md);font-weight:500;gap:var(--lui-toggle-gap-md);justify-content:center;line-height:1;min-height:var(--lui-toggle-height-md);min-width:var(--lui-toggle-min-width-md);padding-inline:var(--lui-toggle-padding-x-md);transition:var(--lui-transition);user-select:none;white-space:nowrap}.lui-toggle svg{flex-shrink:0;height:var(--lui-toggle-icon-size-md);pointer-events:none;width:var(--lui-toggle-icon-size-md)}.lui-toggle:focus-visible{box-shadow:0 0 0 2px var(--lui-bg-surface),0 0 0 4px var(--lui-border-focus,var(--lui-bg-interactive));outline:none}.lui-toggle:disabled,.lui-toggle[aria-disabled=true]{cursor:var(--lui-disabled-cursor,not-allowed);opacity:var(--lui-disabled-opacity,.5);pointer-events:none}.lui-toggle.lui-toggle--sm{font-size:var(--lui-toggle-font-size-sm);gap:var(--lui-toggle-gap-sm);min-height:var(--lui-toggle-height-sm);min-width:var(--lui-toggle-min-width-sm);padding-inline:var(--lui-toggle-padding-x-sm)}.lui-toggle.lui-toggle--sm svg{height:var(--lui-toggle-icon-size-sm);width:var(--lui-toggle-icon-size-sm)}.lui-toggle.lui-toggle--lg{font-size:var(--lui-toggle-font-size-lg);gap:var(--lui-toggle-gap-lg);min-height:var(--lui-toggle-height-lg);min-width:var(--lui-toggle-min-width-lg);padding-inline:var(--lui-toggle-padding-x-lg)}.lui-toggle.lui-toggle--lg svg{height:var(--lui-toggle-icon-size-lg);width:var(--lui-toggle-icon-size-lg)}.lui-toggle.lui-toggle--default{background-color:var(--lui-toggle-default-bg);border-color:var(--lui-toggle-default-border);color:var(--lui-toggle-default-text)}.lui-toggle.lui-toggle--default:hover:not(:disabled){background-color:var(--lui-toggle-default-hover-bg);color:var(--lui-toggle-default-hover-text)}.lui-toggle.lui-toggle--default.lui-toggle--pressed{background-color:var(--lui-toggle-default-pressed-bg);border-color:var(--lui-toggle-default-pressed-border);color:var(--lui-toggle-default-pressed-text)}.lui-toggle.lui-toggle--outline{background-color:var(--lui-toggle-outline-bg);border-color:var(--lui-toggle-outline-border);color:var(--lui-toggle-outline-text)}.lui-toggle.lui-toggle--outline:hover:not(:disabled){background-color:var(--lui-toggle-outline-hover-bg);color:var(--lui-toggle-outline-hover-text)}.lui-toggle.lui-toggle--outline.lui-toggle--pressed{background-color:var(--lui-toggle-outline-pressed-bg);border-color:var(--lui-toggle-outline-pressed-border);color:var(--lui-toggle-outline-pressed-text)}.lui-toggle-group{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--lui-toggle-group-gap)}.lui-toggle-group--vertical{align-items:stretch;flex-direction:column;flex-wrap:nowrap;width:100%}}

package/dist/toggle.d.ts

@@ -0,0 +1,46 @@
+import type { Ref } from "react";
+export type ToggleVariant = "default" | "outline";
+export type ToggleSize = "sm" | "md" | "lg";
+export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    ref?: Ref<HTMLButtonElement>;
+    /** Whether the toggle is pressed. Controlled usage. */
+    pressed?: boolean;
+    /** Initial pressed state for uncontrolled usage. Default: false. */
+    defaultPressed?: boolean;
+    /** Called when the pressed state changes. */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Visual style variant. Default: "default". */
+    variant?: ToggleVariant;
+    /** Size of the toggle. Default: "md". */
+    size?: ToggleSize;
+    /** Value string used when inside a ToggleGroup. */
+    value?: string;
+}
+export declare function Toggle({ ref, className, pressed: controlledPressed, defaultPressed, onPressedChange, variant, size, value, disabled, children, onClick, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Toggle {
+    var displayName: string;
+}
+export type ToggleGroupType = "single" | "multiple";
+export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    ref?: Ref<HTMLDivElement>;
+    /** Selection mode. "single" allows one selection; "multiple" allows many. */
+    type: ToggleGroupType;
+    /** Controlled selected value (single) or values (multiple). */
+    value?: string | string[];
+    /** Initial selected value (single: string) or values (multiple: string[]) for uncontrolled usage. */
+    defaultValue?: string | string[];
+    /** Called when selection changes. Receives a string for single, string[] for multiple. */
+    onValueChange?: ((value: string) => void) | ((value: string[]) => void);
+    /** Visual style variant applied to all toggles. Default: "default". */
+    variant?: ToggleVariant;
+    /** Size applied to all toggles. Default: "md". */
+    size?: ToggleSize;
+    /** Disables all toggles in the group. */
+    disabled?: boolean;
+    /** Layout direction of the group. Default: "horizontal". */
+    direction?: "horizontal" | "vertical";
+}
+export declare function ToggleGroup({ ref, className, type, value: controlledValue, defaultValue, onValueChange, variant, size, disabled, direction, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ToggleGroup {
+    var displayName: string;
+}

package/dist/toggle.vars.css

@@ -0,0 +1 @@
+:root{--lui-toggle-height-sm:1.75rem;--lui-toggle-height-md:2.25rem;--lui-toggle-height-lg:2.75rem;--lui-toggle-min-width-sm:1.75rem;--lui-toggle-min-width-md:2.25rem;--lui-toggle-min-width-lg:2.75rem;--lui-toggle-padding-x-sm:0.375rem;--lui-toggle-padding-x-md:0.625rem;--lui-toggle-padding-x-lg:0.875rem;--lui-toggle-font-size-sm:0.75rem;--lui-toggle-font-size-md:0.875rem;--lui-toggle-font-size-lg:1rem;--lui-toggle-gap-sm:0.25rem;--lui-toggle-gap-md:0.375rem;--lui-toggle-gap-lg:0.5rem;--lui-toggle-icon-size-sm:0.875rem;--lui-toggle-icon-size-md:1rem;--lui-toggle-icon-size-lg:1.125rem;--lui-toggle-radius:var(--lui-radius-sm);--lui-toggle-default-bg:transparent;--lui-toggle-default-text:var(--lui-text-secondary);--lui-toggle-default-border:transparent;--lui-toggle-default-hover-bg:var(--lui-bg-surface-raised);--lui-toggle-default-hover-text:var(--lui-text-primary);--lui-toggle-default-pressed-bg:var(--lui-bg-interactive-soft,color-mix(in srgb,var(--lui-bg-interactive) 15%,transparent));--lui-toggle-default-pressed-text:var(--lui-text-brand,var(--lui-bg-interactive));--lui-toggle-default-pressed-border:transparent;--lui-toggle-outline-bg:transparent;--lui-toggle-outline-text:var(--lui-text-secondary);--lui-toggle-outline-border:var(--lui-border-default);--lui-toggle-outline-hover-bg:var(--lui-bg-surface-raised);--lui-toggle-outline-hover-text:var(--lui-text-primary);--lui-toggle-outline-pressed-bg:var(--lui-bg-interactive-soft,color-mix(in srgb,var(--lui-bg-interactive) 15%,transparent));--lui-toggle-outline-pressed-text:var(--lui-text-brand,var(--lui-bg-interactive));--lui-toggle-outline-pressed-border:var(--lui-border-interactive);--lui-toggle-group-gap:0.25rem}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@ladder-ui/toggle",
+  "version": "0.10.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*.css": "./dist/*.css",
+    "./styles/*.css": "./dist/*.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "nodejs",
+    "react",
+    "ui",
+    "components",
+    "library"
+  ],
+  "author": "Ivan Avila <ivelaval@gmail.com> - https://www.vennet.dev",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ivelaval/ladder-ui.git",
+    "directory": "packages/toggle"
+  },
+  "bugs": {
+    "url": "https://github.com/ivelaval/ladder-ui/issues"
+  },
+  "homepage": "https://github.com/ivelaval/ladder-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^19.0.0",
+    "rollup": "^4.9.6",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.90.0",
+    "typescript": "^5.3.3",
+    "tslib": "^2.6.2",
+    "@ladder-ui/core": "0.10.0"
+  },
+  "peerDependencies": {
+    "@ladder-ui/core": ">=0.0.1",
+    "react": ">=18.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "pnpm clean && rollup -c",
+    "dev": "rollup -c -w",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}