@dotss/ui 0.0.4 → 0.0.6

package/dist/FocusBoundary/FocusBoundary.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),c=require("react"),g=require("../Flexbox/Flexbox.cjs");function h({active:f,children:i,inlineCSS:d,disabled:a=!1,...m}){const s=c.useRef(null),o=c.useRef(null),r=c.useRef([]),n=c.useRef(-1),b=()=>{s.current&&(r.current=Array.from(s.current.querySelectorAll("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]")))},E=()=>{var t;if(r.current)for(let e=0;e<r.current.length;e++){const u=r.current[e];if(!((t=u==null?void 0:u.getAttribute("class"))!=null&&t.includes("closeButton"))){u==null||u.focus(),n.current=e;break}}},x=()=>{var e;const t=r.current[n.current+1];if(!t){(e=r.current[0])==null||e.focus(),n.current=0;return}t.focus(),n.current+=1},y=()=>{var e;const t=r.current[n.current-1];if(!t){(e=r.current[r.current.length-1])==null||e.focus(),n.current=r.current.length-1;return}t.focus(),n.current-=1};return c.useEffect(()=>{!f&&o.current&&o.current.focus()},[f]),c.useEffect(()=>{const t=e=>{e.key==="Tab"&&(e.preventDefault(),e.shiftKey?y():x())};return o.current=document.activeElement,b(),E(),document.addEventListener("keydown",t),()=>{document.removeEventListener("keydown",t)}},[]),l.jsxs(l.Fragment,{children:[a&&i,!a&&l.jsx(g.default,{className:"focus-boundary",ref:s,flexDirection:"column",inlineCSS:{height:"100%",...d},...m,children:i})]})}exports.default=h;

package/dist/FocusBoundary/FocusBoundary.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+
+export interface FocusBoundaryProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    active?: boolean;
+    disabled?: boolean;
+}
+declare function FocusBoundary({ active, children, inlineCSS, disabled, ...props }: FocusBoundaryProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default FocusBoundary;

package/dist/FocusBoundary/FocusBoundary.es.js

@@ -0,0 +1,73 @@
+import { jsxs as h, Fragment as p, jsx as g } from "@emotion/react/jsx-runtime";
+import { useRef as u, useEffect as a } from "react";
+import v from "../Flexbox/Flexbox.es.js";
+function w({
+  active: f,
+  children: l,
+  inlineCSS: d,
+  disabled: i = !1,
+  ...m
+}) {
+  const o = u(null), s = u(null), r = u([]), n = u(-1), b = () => {
+    o.current && (r.current = Array.from(
+      o.current.querySelectorAll(
+        "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]"
+      )
+    ));
+  }, E = () => {
+    var t;
+    if (r.current)
+      for (let e = 0; e < r.current.length; e++) {
+        const c = r.current[e];
+        if (!((t = c == null ? void 0 : c.getAttribute("class")) != null && t.includes("closeButton"))) {
+          c == null || c.focus(), n.current = e;
+          break;
+        }
+      }
+  }, x = () => {
+    var e;
+    const t = r.current[n.current + 1];
+    if (!t) {
+      (e = r.current[0]) == null || e.focus(), n.current = 0;
+      return;
+    }
+    t.focus(), n.current += 1;
+  }, y = () => {
+    var e;
+    const t = r.current[n.current - 1];
+    if (!t) {
+      (e = r.current[r.current.length - 1]) == null || e.focus(), n.current = r.current.length - 1;
+      return;
+    }
+    t.focus(), n.current -= 1;
+  };
+  return a(() => {
+    !f && s.current && s.current.focus();
+  }, [f]), a(() => {
+    const t = (e) => {
+      e.key === "Tab" && (e.preventDefault(), e.shiftKey ? y() : x());
+    };
+    return s.current = document.activeElement, b(), E(), document.addEventListener("keydown", t), () => {
+      document.removeEventListener("keydown", t);
+    };
+  }, []), /* @__PURE__ */ h(p, { children: [
+    i && l,
+    !i && /* @__PURE__ */ g(
+      v,
+      {
+        className: "focus-boundary",
+        ref: o,
+        flexDirection: "column",
+        inlineCSS: {
+          height: "100%",
+          ...d
+        },
+        ...m,
+        children: l
+      }
+    )
+  ] });
+}
+export {
+  w as default
+};

package/dist/FocusBoundary/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./FocusBoundary.cjs");exports.default=e.default;

package/dist/FocusBoundary/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FocusBoundary } from './FocusBoundary';
+
+export default FocusBoundary;

package/dist/FocusBoundary/index.es.js

@@ -0,0 +1,4 @@
+import r from "./FocusBoundary.es.js";
+export {
+  r as default
+};

package/dist/FormControlText/FormControlText.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@emotion/react/jsx-runtime"),r=require("react"),C=require("@emotion/styled"),S=e=>e&&e.__esModule?e:{default:e},a=S(C),j=a.default.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+  flex-direction: ${({placement:e})=>e==="left"?"row-reverse":"row"};
+`,v=a.default.div`
+  display: inline-flex;
+`,_=a.default.div`
+  ${({theme:{palette:{grey:e},typography:{h0R:o,b2R:i}},size:s,disabled:c})=>{let l={fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing};return s==="2xLarge"&&(l={fontSize:o.size,fontWeight:o.weight,lineHeight:o.lineHeight,letterSpacing:o.letterSpacing}),c&&(l.color=e[30]),l}}
+`,w=r.forwardRef(function({control:o,text:i,placement:s,size:c,onClick:l,disabled:f,inlineCSS:g,...h},x){const p=r.useRef(null),y=t=>{var n,d;t.preventDefault(),(d=(n=p.current)==null?void 0:n.getElementsByTagName("input")[0])==null||d.click(),typeof l=="function"&&l(t)},m=t=>n=>{n.stopPropagation(),typeof t=="function"&&t(n)};return u.jsxs(j,{ref:x,onClick:y,placement:s,disabled:f,...h,css:g,children:[u.jsx(v,{ref:p,children:r.Children.map(o,t=>{var n;return r.isValidElement(t)?r.cloneElement(t,{size:c,disabled:f,onClick:m((n=t.props)==null?void 0:n.onClick),...t.props}):null})}),u.jsx(_,{size:c,disabled:f,children:i})]})});exports.default=w;

package/dist/FormControlText/FormControlText.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { default as Checkbox } from '../Checkbox';
+import { default as Radio } from '../Radio';
+import { GeneralComponentProps, Size } from '../typings/component';
+
+export interface FormControlTextProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    control: ReactElement<typeof Checkbox | typeof Radio>;
+    text: ReactNode;
+    placement?: 'left' | 'right';
+    size?: Extract<Size, 'medium' | '2xLarge'>;
+    disabled?: boolean;
+}
+declare const FormControlText: import('react').ForwardRefExoticComponent<FormControlTextProps & import('react').RefAttributes<HTMLDivElement>>;
+export default FormControlText;

package/dist/FormControlText/FormControlText.es.js

@@ -0,0 +1,68 @@
+import { jsxs as y, jsx as g } from "@emotion/react/jsx-runtime";
+import { forwardRef as C, useRef as S, Children as w, isValidElement as v, cloneElement as T } from "react";
+import p from "@emotion/styled";
+const j = p.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
+  cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+  flex-direction: ${({ placement: e }) => e === "left" ? "row-reverse" : "row"};
+`, k = p.div`
+  display: inline-flex;
+`, H = p.div`
+  ${({
+  theme: {
+    palette: { grey: e },
+    typography: { h0R: o, b2R: i }
+  },
+  size: c,
+  disabled: l
+}) => {
+  let r = {
+    fontSize: i.size,
+    fontWeight: i.weight,
+    lineHeight: i.lineHeight,
+    letterSpacing: i.letterSpacing
+  };
+  return c === "2xLarge" && (r = {
+    fontSize: o.size,
+    fontWeight: o.weight,
+    lineHeight: o.lineHeight,
+    letterSpacing: o.letterSpacing
+  }), l && (r.color = e[30]), r;
+}}
+`, F = C(function({ control: o, text: i, placement: c, size: l, onClick: r, disabled: f, inlineCSS: u, ...d }, h) {
+  const s = S(null), m = (t) => {
+    var n, a;
+    t.preventDefault(), (a = (n = s.current) == null ? void 0 : n.getElementsByTagName("input")[0]) == null || a.click(), typeof r == "function" && r(t);
+  }, x = (t) => (n) => {
+    n.stopPropagation(), typeof t == "function" && t(n);
+  };
+  return /* @__PURE__ */ y(
+    j,
+    {
+      ref: h,
+      onClick: m,
+      placement: c,
+      disabled: f,
+      ...d,
+      css: u,
+      children: [
+        /* @__PURE__ */ g(k, { ref: s, children: w.map(o, (t) => {
+          var n;
+          return v(t) ? T(t, {
+            size: l,
+            disabled: f,
+            onClick: x((n = t.props) == null ? void 0 : n.onClick),
+            ...t.props
+          }) : null;
+        }) }),
+        /* @__PURE__ */ g(H, { size: l, disabled: f, children: i })
+      ]
+    }
+  );
+});
+export {
+  F as default
+};

package/dist/FormControlText/FormControlText.stories.d.ts

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./FormControlText').FormControlTextProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        control: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithCheckbox: Story;
+export declare const WithRadio: Story;

package/dist/FormControlText/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./FormControlText.cjs");exports.default=e.default;

package/dist/FormControlText/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FormControlText } from './FormControlText';
+
+export default FormControlText;

package/dist/FormControlText/index.es.js

@@ -0,0 +1,4 @@
+import r from "./FormControlText.es.js";
+export {
+  r as default
+};

package/dist/Icon/Icon.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),t=require("react"),S=require("../resources/tictoccroc/icons/index.ts-IVJAK4qr.cjs"),b=require("@emotion/styled"),h=require("../utils/getPaletteColor/getPaletteColor.cjs"),I=r=>r&&r.__esModule?r:{default:r},w=I(b),$=r=>w.default(r)`
+  ${({size:o,width:s,height:a})=>{let n={width:s,height:a};switch(o){case"large":n={width:32,height:32};break;case"medium":n={width:24,height:24};break;case"small":n={width:20,height:20};break;case"xSmall":n={width:16,height:16};break}return n}};
+
+  color: ${({theme:o,color:s="grey.100"})=>h.default(s,{theme:o})};
+`,q=t.forwardRef(function({id:o,name:s,width:a=24,height:n=24,size:i,color:p="grey.100",inlineCSS:d,...f},m){const _=$(k=>t.Children.map(S.SvgIcons[s](),c=>t.isValidElement(c)?t.cloneElement(c,{focusable:!1,"aria-hidden":!0,...c.props,...k,children:t.Children.map(c.props.children,e=>{var u;if(!t.isValidElement(e))return null;if(e.type==="mask"){const l=`${e.props.id}-${o||0}`;return t.cloneElement(e,{...e.props,id:l})}return e.type==="path"&&!!e.props.mask?t.cloneElement(e,{...e.props,mask:`${(u=e.props.mask)==null?void 0:u.replace(/\)$/,`-${o||0})`)}`}):e})}):null));return y.jsx(_,{ref:m,width:a,height:n,size:i,color:p,...f,css:d})});exports.default=q;

package/dist/Icon/Icon.d.ts

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+import { Color, GeneralComponentProps, IconName, Size } from '../typings/component';
+import { CSSValue } from '../typings/utility';
+
+export interface IconProps extends GeneralComponentProps<Omit<SVGProps<SVGElement>, 'width' | 'height' | 'color'>> {
+    name: IconName;
+    width?: CSSValue;
+    height?: CSSValue;
+    size?: Exclude<Size, 'xLarge' | '2xLarge'>;
+    color?: Color;
+}
+declare const Icon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGElement>>;
+export default Icon;

package/dist/Icon/Icon.es.js

@@ -0,0 +1,82 @@
+import { jsx as w } from "@emotion/react/jsx-runtime";
+import { forwardRef as y, Children as f, isValidElement as i, cloneElement as s } from "react";
+import { S as $ } from "../resources/tictoccroc/icons/index.ts-CarI_z7q.js";
+import b from "@emotion/styled";
+import x from "../utils/getPaletteColor/getPaletteColor.es.js";
+const g = (p) => b(p)`
+  ${({ size: t, width: o, height: a }) => {
+  let r = {
+    width: o,
+    height: a
+  };
+  switch (t) {
+    case "large":
+      r = {
+        width: 32,
+        height: 32
+      };
+      break;
+    case "medium":
+      r = {
+        width: 24,
+        height: 24
+      };
+      break;
+    case "small":
+      r = {
+        width: 20,
+        height: 20
+      };
+      break;
+    case "xSmall":
+      r = {
+        width: 16,
+        height: 16
+      };
+      break;
+  }
+  return r;
+}};
+
+  color: ${({ theme: t, color: o = "grey.100" }) => x(o, {
+  theme: t
+})};
+`, V = y(function({ id: t, name: o, width: a = 24, height: r = 24, size: u, color: l = "grey.100", inlineCSS: k, ...I }, S) {
+  const d = g((h) => f.map($[o](), (n) => i(n) ? s(n, {
+    focusable: !1,
+    "aria-hidden": !0,
+    ...n.props,
+    ...h,
+    children: f.map(n.props.children, (e) => {
+      var c;
+      if (!i(e))
+        return null;
+      if (e.type === "mask") {
+        const m = `${e.props.id}-${t || 0}`;
+        return s(e, {
+          ...e.props,
+          id: m
+        });
+      }
+      return e.type === "path" && !!e.props.mask ? s(e, {
+        ...e.props,
+        mask: `${(c = e.props.mask) == null ? void 0 : c.replace(/\)$/, `-${t || 0})`)}`
+      }) : e;
+    })
+  }) : null));
+  return /* @__PURE__ */ w(
+    d,
+    {
+      ref: S,
+      width: a,
+      height: r,
+      size: u,
+      color: l,
+      ...I,
+      css: k
+    }
+  );
+});
+export {
+  V as default
+};

package/dist/Icon/Icon.stories.d.ts

@@ -0,0 +1,23 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<import('./Icon').IconProps, "ref"> & import('react').RefAttributes<SVGElement>>;
+    parameters: {
+        layout: string;
+        controls: {
+            exclude: string[];
+        };
+    };
+    args: {
+        size: "medium";
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Fill: Story;
+export declare const Line: Story;
+export declare const ColorLine: Story;
+export declare const Etc: Story;
+export declare const Emoji: Story;

package/dist/Icon/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Icon.cjs");exports.default=e.default;

package/dist/Icon/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Icon } from './Icon';
+
+export default Icon;

package/dist/Icon/index.es.js

@@ -0,0 +1,4 @@
+import r from "./Icon.es.js";
+export {
+  r as default
+};

package/dist/IconButton/IconButton.cjs

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@emotion/react/jsx-runtime"),h=require("react"),b=require("../Icon/Icon.cjs"),g=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),k=require("../utils/getIconLabel/getIconLabel.cjs"),v=require("@emotion/styled"),f=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),m=r=>r&&r.__esModule?r:{default:r},s=m(v),C=s.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+
+  ${({theme:{spacing:r},size:e})=>{let i={width:40,height:40,padding:r.content(1)};switch(e){case"2xLarge":i={width:80,height:80,padding:0};break;case"xLarge":i={width:56,height:56,padding:r.content(.5)};break;case"large":i={width:48,height:48,padding:r.content(1)};break;case"small":i={width:32,height:32,padding:r.content(1)};break;case"xSmall":i={width:24,height:24,padding:r.content(.5)};break}return i}};
+
+  ${({theme:{palette:{yellow:r,grey:e}},variant:i,color:a,isHoverPossible:t})=>{let o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:e[10]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:e[10]}}:{}};switch(i){case"standard":a==="tertiary"&&(o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:e[80]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:e[80]}}:{}});break;case"filled":a==="primary"&&(o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:r[80]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:r[80]}}:{}}),a==="secondary"&&(o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:e[100]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:e[100]}}:{}});break;case"outlined":a==="primary"&&(o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:e[10]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:e[10]}}:{}}),a==="tertiary"&&(o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:e[100]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:e[100]}}:{}});break}return o}};
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    & > div {
+      ${({theme:{palette:{brand:r,grey:e}},variant:i,color:a})=>{let t={backgroundColor:"transparent","& svg":{color:e[30]}};switch(i){case"standard":a==="tertiary"&&(t={backgroundColor:"transparent","& svg":{color:e[80]}});break;case"filled":a==="primary"&&(t={backgroundColor:r.primary.disable,"& svg":{color:e[30]}}),a==="secondary"&&(t={backgroundColor:e[10],"& svg":{color:e[30]}});break;case"outlined":a==="secondary"&&(t={backgroundColor:e[10],borderColor:e[30],"& svg":{color:e[30]}}),a==="tertiary"&&(t={backgroundColor:e[80],borderColor:e[70],"& svg":{color:e[70]}});break}return t}};
+    }
+  }
+`,p=s.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid transparent;
+  border-radius: 100px;
+
+  ${({theme:{palette:{brand:r,grey:e}},variant:i,color:a})=>{let t={backgroundColor:"transparent"};switch(i){case"standard":a==="tertiary"&&(t={backgroundColor:"transparent","& svg":{color:e.white}});break;case"filled":a==="primary"&&(t={backgroundColor:r.primary.main,color:f.default(r.primary.main,[e.white,e[100]]),"& svg":{color:"inherit"}}),a==="secondary"&&(t={backgroundColor:r.secondary,color:e.white,"& svg":{color:"inherit"}});break;case"outlined":a==="primary"&&(t={backgroundColor:e.white,borderColor:e[50]}),a==="tertiary"&&(t={backgroundColor:"transparent",borderColor:e[50],"& svg":{color:e[50]}});break}return t}};
+
+  ${({size:r})=>{let e={minWidth:32,minHeight:32,"& svg":{width:24,height:24}};switch(r){case"2xLarge":e={minWidth:80,minHeight:80,borderWidth:2,"& svg":{width:48,height:48}};break;case"xLarge":e={minWidth:52,minHeight:52,"& svg":{width:36,height:36}};break;case"large":e={minWidth:40,minHeight:40,"& svg":{width:32,height:32}};break;case"small":e={minWidth:24,minHeight:24,"& svg":{width:16,height:16}};break;case"xSmall":e={minWidth:20,minHeight:20,"& svg":{width:16,height:16}};break}return e}};
+`,w=h.forwardRef(function({name:e,variant:i="standard",size:a="medium",color:t="primary",inlineCSS:o,disabled:n=!1,...c},l){const{isHoverPossible:u}=g.default();return d.jsx(C,{ref:l,variant:i,size:a,color:t,"aria-disabled":n,"aria-label":k.default(e),isHoverPossible:u,disabled:n,...c,css:o,children:d.jsx(p,{variant:i,size:a,color:t,children:d.jsx(b.default,{name:e,focusable:!1})})})});exports.default=w;

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,12 @@
+import { ButtonHTMLAttributes } from 'react';
+import { BrandColorKey } from '../typings/color';
+import { GeneralComponentProps, IconName, Size, Variant } from '../typings/component';
+
+export interface IconButtonProps extends GeneralComponentProps<ButtonHTMLAttributes<HTMLButtonElement>> {
+    name: IconName;
+    variant?: Extract<Variant, 'standard' | 'filled' | 'outlined'>;
+    size?: Size;
+    color?: BrandColorKey;
+}
+declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default IconButton;