@clicktap/ui 0.5.0 → 0.7.0

package/Divider/Divider.d.ts

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

package/Divider/styles.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-export declare const Root: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+import { Orientation } 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: Orientation;
+}>>;
 export default Root;

package/index.d.ts

@@ -17,6 +17,7 @@ export * from './Container/Container';
 export * from './ContextMenu/ContextMenu';
 export * from './DateInput/DateInput';
 export * from './Divider/Divider';
+export * from './Divider/types';
 export * from './Input/Input';
 export * from './Link/Link';
 export * from './Meter/Meter';

package/index.js

@@ -612,17 +612,11 @@ 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: 100%;
-  height: 1px;
-  margin: 1rem 0;
+  width: ${({orientation:e})=>e==="vertical"?"1px":"100%"};
+  height: ${({orientation:e})=>e==="vertical"?"auto":"1px"};
+  margin: ${({orientation:e})=>e==="vertical"?"0 1rem":"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]}};
-
-  &[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)`
+`;function J0({orientation:e="horizontal",...t}){const{separatorProps:r}=nc.useSeparator({...t,orientation:e}),o={...t,...r};return y.jsx(Z0,{...o,orientation:e})}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;
@@ -1540,7 +1534,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"}}};
@@ -1554,6 +1548,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}}};
   }
 
@@ -1573,7 +1569,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,23 +11926,20 @@ Dp.defaultProps = {
   errorMessage: void 0
 };
 const Np = _.div`
-  width: 100%;
-  height: 1px;
-  margin: 1rem 0;
+  width: ${({ orientation: e }) => e === "vertical" ? "1px" : "100%"};
+  height: ${({ orientation: e }) => e === "vertical" ? "auto" : "1px"};
+  margin: ${({ orientation: e }) => e === "vertical" ? "0 1rem" : "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 { separatorProps: t } = od(e), r = { ...e, ...t };
-  return /* @__PURE__ */ h(Np, { ...r });
+function p1({
+  orientation: e = "horizontal",
+  ...t
+}) {
+  const { separatorProps: r } = od({ ...t, orientation: e }), o = { ...t, ...r };
+  return /* @__PURE__ */ h(Np, { ...o, orientation: e });
 }
 const vt = _(go)`
   border: 1px solid
@@ -13876,7 +13873,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 }) => {
@@ -13916,6 +13913,8 @@ const eb = _(Zc)`
 }};
 
   &[data-selected] {
+    z-index: 2;
+
     color: ${({ variant: e, theme: t }) => {
   var r, o, n, a;
   switch (e) {
@@ -13952,7 +13951,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.5.0",
+  "version": "0.7.0",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",