@infonomic/uikit 5.32.0 → 5.34.0

package/dist/components/accordion/accordion.module.css

@@ -2,14 +2,6 @@
 
 @layer infonomic-components {
 
-  .root,
-  :global(.infonomic-accordion-root) {
-    border-radius: 6px;
-    width: 300px;
-    background-color: var(--canvas-25);
-    box-shadow: var(--shadow-md);
-  }
-
   .item,
   :global(.infonomic-accordion-item) {
     overflow: hidden;

package/dist/components/accordion/accordion.module.js

@@ -1,6 +1,5 @@
 import "./accordion_module.css";
 const accordion_module = {
-    root: "root-YYzqsy",
     item: "item-iZzmBc",
     header: "header-MBm53y",
     trigger: "trigger-CJlwli",

package/dist/components/accordion/accordion_module.css

@@ -1,13 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme;
 
 @layer infonomic-components {
-  :is(.root-YYzqsy, .infonomic-accordion-root) {
-    background-color: var(--canvas-25);
-    width: 300px;
-    box-shadow: var(--shadow-md);
-    border-radius: 6px;
-  }
-
   :is(.item-iZzmBc, .infonomic-accordion-item) {
     margin-top: 1px;
     overflow: hidden;

package/dist/components/forms/input-password.d.ts

@@ -0,0 +1,3 @@
+import type { InputProps } from './input';
+export declare function InputPassword({ ...props }: InputProps): import("react").JSX.Element;
+//# sourceMappingURL=input-password.d.ts.map

package/dist/components/forms/input-password.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-password.d.ts","sourceRoot":"","sources":["../../../src/components/forms/input-password.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,wBAAgB,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAUrD"}

package/dist/components/forms/input-password.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { EyeClosedIcon } from "../../icons/eye-closed-icon.js";
+import { EyeOpenIcon } from "../../icons/eye-open-icon.js";
+import { Input } from "./input.js";
+function InputPassword({ ...props }) {
+    const [visible, setVisible] = useState(false);
+    return /*#__PURE__*/ jsx(Input, {
+        type: visible ? 'text' : 'password',
+        endAdornment: visible ? /*#__PURE__*/ jsx(EyeOpenIcon, {
+            width: "18px",
+            height: "18px",
+            onClick: ()=>setVisible(!visible)
+        }) : /*#__PURE__*/ jsx(EyeClosedIcon, {
+            width: "18px",
+            height: "18px",
+            onClick: ()=>setVisible(!visible)
+        }),
+        ...props
+    });
+}
+export { InputPassword };

package/dist/icons/eye-closed-icon.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { IconProps } from './types/icon.js';
+export declare const EyeClosedIcon: {
+    ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=eye-closed-icon.d.ts.map

package/dist/icons/eye-closed-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eye-closed-icon.d.ts","sourceRoot":"","sources":["../../src/icons/eye-closed-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,aAAa;2CAIvB,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAuB/B,CAAA"}

package/dist/icons/eye-closed-icon.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { IconElement } from "./icon-element.js";
+import icons_module from "./icons.module.js";
+const EyeClosedIcon = ({ className, svgClassName, ...rest })=>{
+    const applied = classnames(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
+    return /*#__PURE__*/ jsx(IconElement, {
+        className: classnames('eye-closed-icon', className),
+        ...rest,
+        children: /*#__PURE__*/ jsxs("svg", {
+            className: applied,
+            xmlns: "http://www.w3.org/2000/svg",
+            focusable: "false",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            strokeWidth: 1.5,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+                /*#__PURE__*/ jsx("path", {
+                    d: "m15 18-.722-3.25"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M2 8a10.645 10.645 0 0 0 20 0"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "m20 15-1.726-2.05"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "m4 15 1.726-2.05"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "m9 18 .722-3.25"
+                })
+            ]
+        })
+    });
+};
+EyeClosedIcon.displayName = 'EyeClosedIcon';
+export { EyeClosedIcon };

package/dist/icons/eye-open-icon.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { IconProps } from './types/icon.js';
+export declare const EyeOpenIcon: {
+    ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=eye-open-icon.d.ts.map

package/dist/icons/eye-open-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eye-open-icon.d.ts","sourceRoot":"","sources":["../../src/icons/eye-open-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,WAAW;2CAIrB,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAoB/B,CAAA"}

package/dist/icons/eye-open-icon.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { IconElement } from "./icon-element.js";
+import icons_module from "./icons.module.js";
+const EyeOpenIcon = ({ className, svgClassName, ...rest })=>{
+    const applied = classnames(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
+    return /*#__PURE__*/ jsx(IconElement, {
+        className: classnames('eye-open-icon', className),
+        ...rest,
+        children: /*#__PURE__*/ jsxs("svg", {
+            className: applied,
+            xmlns: "http://www.w3.org/2000/svg",
+            focusable: "false",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            strokeWidth: 1.5,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+                /*#__PURE__*/ jsx("path", {
+                    d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                }),
+                /*#__PURE__*/ jsx("circle", {
+                    cx: "12",
+                    cy: "12",
+                    r: "3"
+                })
+            ]
+        })
+    });
+};
+EyeOpenIcon.displayName = 'EyeOpenIcon';
+export { EyeOpenIcon };

package/dist/icons/index.d.ts

@@ -19,6 +19,8 @@ export * from './edit-icon.js';
 export * from './ellipsis-icon.js';
 export * from './email-icon.js';
 export * from './external-link-icon.js';
+export * from './eye-closed-icon.js';
+export * from './eye-open-icon.js';
 export * from './github-icon.js';
 export * from './globe-icon.js';
 export * from './google-icon.js';

package/dist/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,wBAAwB,CAAA;AACtC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,wBAAwB,CAAA;AACtC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA"}

package/dist/icons/index.js

@@ -19,6 +19,8 @@ export * from "./edit-icon.js";
 export * from "./ellipsis-icon.js";
 export * from "./email-icon.js";
 export * from "./external-link-icon.js";
+export * from "./eye-closed-icon.js";
+export * from "./eye-open-icon.js";
 export * from "./github-icon.js";
 export * from "./globe-icon.js";
 export * from "./google-icon.js";

package/dist/react.d.ts

@@ -25,6 +25,7 @@ export * from './components/forms/errors.js';
 export * from './components/forms/help-text.js';
 export * from './components/forms/input.js';
 export * from './components/forms/input-adornment.js';
+export * from './components/forms/input-password.js';
 export * from './components/forms/label.js';
 export * from './components/forms/radio-group.js';
 export * from './components/forms/select.js';
@@ -62,6 +63,8 @@ export * from './icons/edit-icon.js';
 export * from './icons/ellipsis-icon.js';
 export * from './icons/email-icon.js';
 export * from './icons/external-link-icon.js';
+export * from './icons/eye-closed-icon.js';
+export * from './icons/eye-open-icon.js';
 export * from './icons/github-icon.js';
 export * from './icons/globe-icon.js';
 export * from './icons/google-icon.js';

package/dist/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"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"}

package/dist/react.js

@@ -21,6 +21,7 @@ export * from "./components/forms/errors.js";
 export * from "./components/forms/help-text.js";
 export * from "./components/forms/input.js";
 export * from "./components/forms/input-adornment.js";
+export * from "./components/forms/input-password.js";
 export * from "./components/forms/label.js";
 export * from "./components/forms/radio-group.js";
 export * from "./components/forms/select.js";
@@ -58,6 +59,8 @@ export * from "./icons/edit-icon.js";
 export * from "./icons/ellipsis-icon.js";
 export * from "./icons/email-icon.js";
 export * from "./icons/external-link-icon.js";
+export * from "./icons/eye-closed-icon.js";
+export * from "./icons/eye-open-icon.js";
 export * from "./icons/github-icon.js";
 export * from "./icons/globe-icon.js";
 export * from "./icons/google-icon.js";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "5.32.0",
+  "version": "5.34.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/components/accordion/accordion.module.css

@@ -2,14 +2,6 @@
 
 @layer infonomic-components {
 
-  .root,
-  :global(.infonomic-accordion-root) {
-    border-radius: 6px;
-    width: 300px;
-    background-color: var(--canvas-25);
-    box-shadow: var(--shadow-md);
-  }
-
   .item,
   :global(.infonomic-accordion-item) {
     overflow: hidden;

package/src/components/accordion/accordion.stories.tsx

@@ -16,19 +16,27 @@ export default meta
 
 type Story = StoryObj<typeof AccordionComponent.Root>
 
+
+/**
+ * NOTE: Accordions are very much context specific in terms of styling
+ * and so we apply very little styling to the default accordion component.
+ * Below is an example of a custom (albeit basic) styled accordion for demo 
+ * purposes.
+ */
 export const Accordion: Story = {
   args: {
     type: 'single',
     asChild: true,
     defaultValue: 'item-1',
     collapsible: true,
-    className: 'accordion-root border',
+    className: 'accordion-root',
   },
   render: (args) => (
     <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <style>
         {`
       .accordion-root {
+        border: 1px solid var(--gray-100);
         border-radius: 6px;
         padding: 12px 6px;
         width: 300px;
@@ -58,6 +66,7 @@ export const Accordion: Story = {
       }
 
       .dark .accordion-root {
+        border: 1px solid var(--gray-600);
         background-color: var(--canvas-700);
       }
 

package/src/components/forms/input-password.tsx

@@ -0,0 +1,18 @@
+import { useState } from 'react'
+
+import { EyeClosedIcon } from '../../icons/eye-closed-icon.js'
+import { EyeOpenIcon } from '../../icons/eye-open-icon.js'
+import { Input } from './input'
+import type { InputProps } from './input'
+
+export function InputPassword({ ...props }: InputProps) {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <Input
+      type={visible ? 'text' : 'password'}
+      endAdornment={visible ? <EyeOpenIcon width="18px" height="18px" onClick={() => setVisible(!visible)} /> : <EyeClosedIcon width="18px" height="18px" onClick={() => setVisible(!visible)} />}
+      {...props}
+    />
+  )
+}

package/src/components/forms/input.stories.tsx

@@ -6,6 +6,7 @@ import { intent } from '../@types/shared.js'
 import { IconButton } from '../button/icon-button.js'
 import { size, variant } from './@types/input.js'
 import { Input, InputAdornment } from './index.js'
+import { InputPassword } from './input-password.js'
 
 export default {
   title: 'Components/Forms/Text',
@@ -165,3 +166,19 @@ export const Error = (): React.JSX.Element => {
     </div>
   )
 }
+
+export const Password = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '300px', margin: '0 auto' }}>
+      <InputPassword
+        required
+        id="password"
+        name="password"
+        label="Password"
+        placeHolder="Password"
+        helpText="Please enter your password."
+        disabled={false}
+      />
+    </div>
+  )
+}

package/src/icons/eye-closed-icon.tsx

@@ -0,0 +1,38 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const EyeClosedIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('eye-closed-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <path d="m15 18-.722-3.25" />
+        <path d="M2 8a10.645 10.645 0 0 0 20 0" />
+        <path d="m20 15-1.726-2.05" />
+        <path d="m4 15 1.726-2.05" />
+        <path d="m9 18 .722-3.25" />
+      </svg>
+    </IconElement>
+  )
+}
+
+EyeClosedIcon.displayName = 'EyeClosedIcon'

package/src/icons/eye-open-icon.tsx

@@ -0,0 +1,35 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const EyeOpenIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('eye-open-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+    </IconElement>
+  )
+}
+
+EyeOpenIcon.displayName = 'EyeOpenIcon'

package/src/icons/index.ts

@@ -19,6 +19,8 @@ export * from './edit-icon.js'
 export * from './ellipsis-icon.js'
 export * from './email-icon.js'
 export * from './external-link-icon.js'
+export * from './eye-closed-icon.js'
+export * from './eye-open-icon.js'
 export * from './github-icon.js'
 export * from './globe-icon.js'
 export * from './google-icon.js'

package/src/react.ts

@@ -28,6 +28,7 @@ export * from './components/forms/errors.js'
 export * from './components/forms/help-text.js'
 export * from './components/forms/input.js'
 export * from './components/forms/input-adornment.js'
+export * from './components/forms/input-password.js'
 export * from './components/forms/label.js'
 export * from './components/forms/radio-group.js'
 export * from './components/forms/select.js'
@@ -65,6 +66,8 @@ export * from './icons/edit-icon.js'
 export * from './icons/ellipsis-icon.js'
 export * from './icons/email-icon.js'
 export * from './icons/external-link-icon.js'
+export * from './icons/eye-closed-icon.js'
+export * from './icons/eye-open-icon.js'
 export * from './icons/github-icon.js'
 export * from './icons/globe-icon.js'
 export * from './icons/google-icon.js'