@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.11

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js

@@ -1,2 +1,2 @@
-import{Ok as s}from"@atom-learning/icons";import*as a from"@radix-ui/react-toggle-group";import*as o from"react";import{Chip as e}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as p}from"../icon/Icon.js";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as n}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const i=t(p,{display:"none"}),c=t.withConfig({shouldForwardStitchesProp:r=>["as"].includes(r)})(e,{"&:not([disabled])":{cursor:"pointer","&:hover":{bg:"$grey200",color:"$grey1000",borderColor:"currentColor"},"&:focus-visible":{...n()},'&[data-state="on"]':{"&:hover":{bg:"white",color:"$primary1000"}}},'&[data-state="off"]':{color:"$grey800",bg:"white",borderColor:"$grey600"},'&[data-state="on"]':{[`& ${i}`]:{display:"block"}}}),d=({size:r="md",children:m,...l})=>o.createElement(a.Item,{...l,asChild:!0},o.createElement(c,{as:"button"},o.createElement(i,{is:s,size:r==="lg"?"md":"sm"}),o.createElement(e.Content,null,m)));export{d as ChipToggleGroupItem};
+import{Ok as r}from"@atom-learning/icons";import*as d from"@radix-ui/react-toggle-group";import*as e from"react";import{Chip as t}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as l}from"../icon/Icon.js";import{styled as o}from"../../styled.js";const n=o(l,{base:["hidden"]}),b=o(t,{base:["flex","not-disabled:cursor-pointer","not-disabled:data-[state=on]:hover:bg-white","not-disabled:data-[state=on]:hover:text-primary-1000","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:bg-grey-200","not-disabled:hover:border-current","not-disabled:hover:text-grey-1000","data-[state=off]:bg-white","data-[state=off]:border-grey-600","data-[state=off]:text-grey-800","data-[state=on]:[&_svg]:block"]}),m=({size:s="md",children:a,...i})=>e.createElement(d.Item,{...i,asChild:!0},e.createElement(b,{as:"button"},e.createElement(n,{is:r,size:s==="lg"?"md":"sm"}),e.createElement(t.Content,null,a)));export{m as ChipToggleGroupItem};
 //# sourceMappingURL=ChipToggleGroupItem.js.map

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledChipToggleIcon = styled(Icon, {\n  display: 'none'\n})\n\nconst StyledChipToggleGroupItem = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Chip, {\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    '&:hover': {\n      bg: '$grey200',\n      color: '$grey1000',\n      borderColor: 'currentColor'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    },\n    '&[data-state=\"on\"]': {\n      '&:hover': {\n        bg: 'white',\n        color: '$primary1000'\n      }\n    }\n  },\n  '&[data-state=\"off\"]': {\n    color: '$grey800',\n    bg: 'white',\n    borderColor: '$grey600'\n  },\n  '&[data-state=\"on\"]': {\n    [`& ${StyledChipToggleIcon}`]: {\n      display: 'block'\n    }\n  }\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n  size = 'md',\n  children,\n  ...rest\n}: TChipToggleGroupItem) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledChipToggleGroupItem as=\"button\">\n        <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n        <Chip.Content>{children}</Chip.Content>\n      </StyledChipToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","propName","Chip","focusVisibleStyleBlock","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"2hBASA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,QAAS,MACX,CAAC,EAEKC,EAA4BF,EAAO,WAAW,CAClD,0BAA4BG,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,oBAAqB,CACnB,OAAQ,UACR,UAAW,CACT,GAAI,WACJ,MAAO,YACP,YAAa,cACf,EACA,kBAAmB,CACjB,GAAGC,GACL,EACA,qBAAsB,CACpB,UAAW,CACT,GAAI,QACJ,MAAO,cACT,CACF,CACF,EACA,sBAAuB,CACrB,MAAO,WACP,GAAI,QACJ,YAAa,UACf,EACA,qBAAsB,CACpB,CAAC,KAAKN,KAAyB,CAC7B,QAAS,OACX,CACF,CACF,CAAC,EAKYO,EAAsB,CAAC,CAClC,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACR,EAAA,CAA0B,GAAG,UAC5BQ,EAAA,cAACX,EAAA,CAAqB,GAAIa,EAAI,KAAML,IAAS,KAAO,KAAO,IAAA,CAAM,EACjEG,EAAA,cAACN,EAAK,QAAL,KAAcI,CAAS,CAC1B,CACF"}
+{"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\n\nconst StyledChipToggleIcon = styled(Icon, {\n  base: ['hidden']\n})\n\nconst StyledChipToggleGroupItem = styled(Chip, {\n  base: [\n    'flex',\n    'not-disabled:cursor-pointer',\n    'not-disabled:data-[state=on]:hover:bg-white',\n    'not-disabled:data-[state=on]:hover:text-primary-1000',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-grey-200',\n    'not-disabled:hover:border-current',\n    'not-disabled:hover:text-grey-1000',\n    'data-[state=off]:bg-white',\n    'data-[state=off]:border-grey-600',\n    'data-[state=off]:text-grey-800',\n    'data-[state=on]:[&_svg]:block'\n  ]\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n  size = 'md',\n  children,\n  ...rest\n}: TChipToggleGroupItem) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledChipToggleGroupItem as=\"button\">\n        <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n        <Chip.Content>{children}</Chip.Content>\n      </StyledChipToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","Chip","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"qQAQA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,KAAM,CAAC,QAAQ,CACjB,CAAC,EAEKC,EAA4BF,EAAOG,EAAM,CAC7C,KAAM,CACJ,OACA,8BACA,8CACA,uDACA,0CACA,sCACA,yEACA,4DACA,iCACA,iCACA,oCACA,oCACA,4BACA,mCACA,iCACA,+BACF,CACF,CAAC,EAKYC,EAAsB,CAAC,CAClC,KAAAC,EAAO,KACP,SAAAC,EACA,GAAGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACN,EAAA,CAA0B,GAAG,QAAA,EAC5BM,EAAA,cAACT,EAAA,CAAqB,GAAIW,EAAI,KAAML,IAAS,KAAO,KAAO,IAAM,CAAA,EACjEG,EAAA,cAACL,EAAK,QAAL,KAAcG,CAAS,CAC1B,CACF"}

package/dist/components/chip-toggle-group/ChipToggleGroupRoot.d.ts

@@ -1,6 +1,30 @@
 import * as React from 'react';
-import { ChipGroup } from '../../components/chip';
-import { ToggleGroup } from '../../utilities/radix-overrides/toggle-group';
-type TChipToggleGroupRootProps = React.ComponentProps<typeof ChipGroup> & React.ComponentProps<typeof ToggleGroup.Root>;
-export declare const ChipToggleGroupRoot: React.ForwardRefExoticComponent<TChipToggleGroupRootProps>;
-export {};
+export declare const ChipToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<Omit<{
+    gap: 1 | 2 | 3;
+} & Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
+    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
+    disableDeselect?: boolean;
+}, "ref">, "ref"> | Omit<Omit<{
+    gap: 1 | 2 | 3;
+} & Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
+    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
+    disableDeselect?: boolean;
+}, "ref">, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/dist/components/chip-toggle-group/ChipToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipToggleGroupRoot.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ChipGroup } from '~/components/chip'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TChipToggleGroupRootProps = React.ComponentProps<typeof ChipGroup> &\n  React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const ChipToggleGroupRoot: React.ForwardRefExoticComponent<TChipToggleGroupRootProps> =\n  React.forwardRef((props, ref) => {\n    return (\n      <ChipGroup\n        ref={ref}\n        as={ToggleGroup.Root}\n        orientation=\"horizontal\"\n        {...props}\n      />\n    )\n  })\n"],"names":["ChipToggleGroupRoot","React","props","ref","ChipGroup","ToggleGroup"],"mappings":"qLAQa,MAAAA,EACXC,EAAM,WAAW,CAACC,EAAOC,IAErBF,EAAA,cAACG,EAAA,CACC,IAAKD,EACL,GAAIE,EAAY,KAChB,YAAY,aACX,GAAGH,EACN,CAEH"}
+{"version":3,"file":"ChipToggleGroupRoot.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ChipGroup } from '~/components/chip'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TChipToggleGroupRootProps = React.ComponentProps<typeof ChipGroup> &\n  React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const ChipToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TChipToggleGroupRootProps\n>((props, ref) => {\n  return (\n    <ChipGroup\n      ref={ref}\n      as={ToggleGroup.Root}\n      orientation=\"horizontal\"\n      {...props}\n    />\n  )\n})\n"],"names":["ChipToggleGroupRoot","React","props","ref","ChipGroup","ToggleGroup"],"mappings":"qLAQa,MAAAA,EAAsBC,EAAM,WAGvC,CAACC,EAAOC,IAENF,EAAA,cAACG,EAAA,CACC,IAAKD,EACL,GAAIE,EAAY,KAChB,YAAY,aACX,GAAGH,EACN,CAEH"}