@clicktap/ui 0.4.0 → 0.6.0

package/Divider/Divider.d.ts

@@ -1,3 +1,3 @@
-import { SeparatorProps } from 'react-aria';
-export declare function Divider(props: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+import { DividerProps } from './types';
+export declare function Divider(props: DividerProps): import("react/jsx-runtime").JSX.Element;
 export default Divider;

package/Divider/styles.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="react" />
-import { SeparatorProps } from 'react-aria';
-export declare const Root: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    orientation: SeparatorProps['orientation'];
-}>>;
+export declare const Root: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export default Root;

package/Divider/types.d.ts

@@ -0,0 +1,4 @@
+import { SeparatorProps } from 'react-aria';
+export type DividerProps = SeparatorProps & {
+    className?: string;
+};

package/index.js

@@ -612,11 +612,17 @@ Check the top-level render call using <`+I+">.")}return $}function Qn(l,$){if(!(
   color: ${({theme:e})=>{var t,r;return((r=(t=e==null?void 0:e.colors)==null?void 0:t.slate)==null?void 0:r[500])??f.colors.slate[500]}};
   font-size: 0.8rem;
 `;function ki({label:e,description:t,errorMessage:r,...o}){return y.jsxs(U0,{...o,children:[y.jsx(Y0,{children:e}),y.jsx(W0,{children:n=>y.jsx(G0,{segment:n})}),y.jsx(q0,{slot:"description",children:t}),y.jsx(X0,{children:r})]})}ki.defaultProps={label:void 0,description:void 0,errorMessage:void 0};const Z0=S.styled.div`
-  width: ${({orientation:e})=>e==="vertical"?"1px":"100%"};
-  height: ${({orientation:e})=>e==="vertical"?"auto":"1px"};
-  margin: ${({orientation:e})=>e==="vertical"?"0 1rem":"1rem 0"};
+  width: 100%;
+  height: 1px;
+  margin: 1rem 0;
   background: ${({theme:e})=>{var t,r;return((r=(t=e==null?void 0:e.colors)==null?void 0:t.slate)==null?void 0:r[200])??f.colors.slate[200]}};
-`;function J0(e){const{orientation:t}=e,{separatorProps:r}=nc.useSeparator(e);return y.jsx(Z0,{...r,orientation:t})}const at=S.styled(W.Input)`
+
+  &[aria-orientation='vertical'] {
+    width: 1px;
+    height: 100%;
+    margin: 0 1rem;
+  }
+`;function J0(e){const{separatorProps:t}=nc.useSeparator(e),r={...e,...t};return y.jsx(Z0,{...r})}const at=S.styled(W.Input)`
   border: 1px solid
     ${({theme:e})=>{var t,r;return((r=(t=e==null?void 0:e.colors)==null?void 0:t.slate)==null?void 0:r[300])??f.colors.slate[300]}};
   font-size: 0.9rem;
@@ -1534,7 +1540,7 @@ Check the top-level render call using <`+I+">.")}return $}function Qn(l,$){if(!(
         `;default:return null}}}
 `,Ni=S.styled(W.Tab)`
   position: relative;
-  z-index: 3;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: ${({orientation:e,variant:t})=>{switch(t){case"underline":return e==="horizontal"?"center":"flex-start";default:return"center"}}};
@@ -1548,6 +1554,8 @@ Check the top-level render call using <`+I+">.")}return $}function Qn(l,$){if(!(
   color: ${({variant:e,theme:t})=>{var r,o,n,a;switch(e){case"underline":case"enclosed":case"outline":return((o=(r=t==null?void 0:t.colors)==null?void 0:r.slate)==null?void 0:o[800])??f.colors.slate[800];case"solid":return((a=(n=t==null?void 0:t.colors)==null?void 0:n.slate)==null?void 0:a[400])??f.colors.slate[400];default:return null}}};
 
   &[data-selected] {
+    z-index: 2;
+
     color: ${({variant:e,theme:t})=>{var r,o,n,a;switch(e){case"underline":case"outline":return((o=(r=t==null?void 0:t.colors)==null?void 0:r.slate)==null?void 0:o[800])??f.colors.slate[800];case"solid":case"enclosed":return((a=(n=t==null?void 0:t.colors)==null?void 0:n.slate)==null?void 0:a[100])??f.colors.slate[100];default:return null}}};
   }
 
@@ -1567,7 +1575,7 @@ Check the top-level render call using <`+I+">.")}return $}function Qn(l,$){if(!(
   }
 `,mg=S.styled(me.motion.span).attrs({className:"tab-overlay"})`
   position: absolute;
-  z-index: 1;
+  z-index: 0;
 
   ${({orientation:e,theme:t,variant:r})=>{var o,n,a,s,i,u,p,g,h,C,b;switch(r){case"solid":return S.css`
           inset: 0px;

package/index.mjs

@@ -11926,17 +11926,23 @@ Dp.defaultProps = {
   errorMessage: void 0
 };
 const Np = _.div`
-  width: ${({ orientation: e }) => e === "vertical" ? "1px" : "100%"};
-  height: ${({ orientation: e }) => e === "vertical" ? "auto" : "1px"};
-  margin: ${({ orientation: e }) => e === "vertical" ? "0 1rem" : "1rem 0"};
+  width: 100%;
+  height: 1px;
+  margin: 1rem 0;
   background: ${({ theme: e }) => {
   var t, r;
   return ((r = (t = e == null ? void 0 : e.colors) == null ? void 0 : t.slate) == null ? void 0 : r[200]) ?? u.colors.slate[200];
 }};
+
+  &[aria-orientation='vertical'] {
+    width: 1px;
+    height: 100%;
+    margin: 0 1rem;
+  }
 `;
 function p1(e) {
-  const { orientation: t } = e, { separatorProps: r } = od(e);
-  return /* @__PURE__ */ h(Np, { ...r, orientation: t });
+  const { separatorProps: t } = od(e), r = { ...e, ...t };
+  return /* @__PURE__ */ h(Np, { ...r });
 }
 const vt = _(go)`
   border: 1px solid
@@ -13870,7 +13876,7 @@ const eb = _(Zc)`
 }}
 `, gl = _(Qc)`
   position: relative;
-  z-index: 3;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: ${({ orientation: e, variant: t }) => {
@@ -13910,6 +13916,8 @@ const eb = _(Zc)`
 }};
 
   &[data-selected] {
+    z-index: 2;
+
     color: ${({ variant: e, theme: t }) => {
   var r, o, n, a;
   switch (e) {
@@ -13946,7 +13954,7 @@ const eb = _(Zc)`
   className: "tab-overlay"
 })`
   position: absolute;
-  z-index: 1;
+  z-index: 0;
 
   ${({ orientation: e, theme: t, variant: r }) => {
   var o, n, a, i, s, d, f, p, $, E, g;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",