@clicktap/ui 0.4.0 → 0.5.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;

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

package/package.json

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