@clicktap/ui 0.6.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;

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

package/package.json

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