@canonical/react-ds-core-form 0.9.0-experimental.2 → 0.9.0-experimental.21

package/dist/esm/ui/Button/Button.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/** Buttons are clickable elements used to perform an action. */
-const Button = ({ id, className, appearance, label, ...props }) => {
-    return (_jsx("button", { id: id, className: ["ds", "button", appearance, className]
-            .filter(Boolean)
-            .join(" "), ...props, "aria-label": label, children: label }));
-};
-export default Button;
-//# sourceMappingURL=Button.js.map

package/dist/esm/ui/Button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,MAAM,MAAM,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACF,EAAsB,EAAE;IAC9B,OAAO,CACL,iBACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;aAC/C,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,gBACG,KAAK,YAEhB,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/esm/ui/Button/index.js

@@ -1,2 +0,0 @@
-export { default as Button } from "./Button.js";
-//# sourceMappingURL=index.js.map

package/dist/esm/ui/Button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/dist/esm/ui/Button/styles.css

@@ -1,63 +0,0 @@
-/* component styles */
-
-/* component variables
-    --button-color-background: background color of the button
-    --button-color-background-hover: background color of the button on hover
-    --button-color-background-active: background color of the button on active
-    --button-color-text: text color of the button
-    --button-color-border: border color of the button
-    --button-color-border-hover: border color of the button on hover
-    --button-color-border-active: border color of the button on active
-
-    --button-margin-left: left margin of the button
-    --button-margin-bottom: bottom margin of the button
-    --button-padding-vertical: vertical padding of the button
-    --button-padding-horizontal: horizontal padding of the button
-    --button-border-width: border width of the button
-    --button-font-size: font size of the button
-    --button-font-weight: font weight of the button
-    --button-line-height: line height of the button
-*/
-.ds.button {
-  display: inline-block;
-  cursor: pointer;
-
-  color: var(--intent-color-text, var(--button-color-text));
-  background-color: var(--intent-color, var(--button-color-background));
-  border-color: var(--intent-color-border, var(--button-color-border));
-  border-style: solid;
-  border-width: var(--button-border-width);
-  font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  line-height: var(--button-line-height);
-  margin-block-end: var(--button-margin-bottom);
-  margin-inline-end: var(--button-margin-left);
-  padding-block: var(--button-padding-vertical);
-  padding-inline: var(--button-padding-horizontal);
-
-  text-align: left;
-  text-decoration: none;
-
-  /* component states */
-  &:hover {
-    background-color: var(
-      --intent-color-hover,
-      var(--button-color-background-hover)
-    );
-    border-color: var(
-      --intent-color-border-hover,
-      var(--button-color-border-hover)
-    );
-  }
-
-  &:active {
-    background-color: var(
-      --intent-color-active,
-      var(--button-color-background-active)
-    );
-    border-color: var(
-      --intent-color-border-active,
-      var(--button-color-border-active)
-    );
-  }
-}

package/dist/esm/ui/Chip/Chip.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./styles.css";
-const componentCssClassName = "ds chip";
-/**
- * description of the Chip component
- * @returns {React.ReactElement} - Rendered Chip
- */
-const Chip = ({ appearance = "neutral", lead, value, onClick, onDismiss, id, className, style, ...props }) => {
-    const Container = onClick ? "button" : "span";
-    return (_jsxs(Container, { id: id, style: style, className: [componentCssClassName, appearance, className]
-            .filter(Boolean)
-            .join(" "), onClick: onClick, ...props, children: [lead && _jsx("span", { className: "lead", children: lead }), value && _jsx("span", { className: "value", children: value }), onDismiss && (_jsx("button", { type: "button", className: "dismiss", "aria-label": "Dismiss", onClick: () => onDismiss() }))] }));
-};
-export default Chip;
-//# sourceMappingURL=Chip.js.map

package/dist/esm/ui/Chip/Chip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../src/ui/Chip/Chip.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAExC;;;GAGG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,UAAU,GAAG,SAAS,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAS,EACT,EAAE,EACF,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACM,EAAsB,EAAE;IACtC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAC9C,OAAO,CACL,MAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,UAAU,EAAE,SAAS,CAAC;aACtD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,OAAO,EAAE,OAAO,KACZ,KAAK,aAER,IAAI,IAAI,eAAM,SAAS,EAAC,MAAM,YAAE,IAAI,GAAQ,EAC5C,KAAK,IAAI,eAAM,SAAS,EAAC,OAAO,YAAE,KAAK,GAAQ,EAC/C,SAAS,IAAI,CACZ,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,SAAS,gBACR,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAC1B,CACH,IACS,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/esm/ui/Chip/index.js

@@ -1,4 +0,0 @@
-/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
-export { default as Chip } from "./Chip.js";
-export * from "./types.js";
-//# sourceMappingURL=index.js.map

package/dist/esm/ui/Chip/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Chip/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Chip/styles.css

@@ -1,79 +0,0 @@
-/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
-
-.ds.chip {
-  border-color: var(--intent-color-border, var(--chip-color-border));
-  border-style: solid;
-  border-radius: var(--chip-border-radius);
-  border-width: var(--chip-border-width);
-
-  color: var(--intent-color-text-tinted, var(--chip-color-text));
-  background-color: var(--intent-color-tinted, var(--chip-color-background));
-
-  display: inline-flex;
-  align-items: baseline;
-
-  user-select: none;
-  white-space: nowrap;
-
-  font-size: var(--chip-font-size);
-  font-weight: var(--chip-font-weight);
-  line-height: var(--chip-line-height);
-
-  margin-block-end: var(--chip-margin-bottom);
-  margin-inline-end: var(--chip-margin-left);
-  padding-block: var(--chip-padding-vertical);
-  padding-inline: var(--chip-padding-horizontal);
-
-  & > .lead {
-    font-variant-caps: all-small-caps;
-    font-variant-numeric: oldstyle-nums;
-  }
-
-  & > .lead + .value::before {
-    content: ": ";
-  }
-
-  & > .lead,
-  & > .value {
-    display: inline;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  & > .dismiss {
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='nonzero' d='M13.041 1.898l1.06 1.06L9.062 8l5.04 5.042-1.06 1.06L8 9.062 2.96 14.1l-1.06-1.06L6.938 8 1.9 2.96l1.06-1.06 5.04 5.04z'/%3E%3C/svg%3E");
-    background-color: var(--chip-color-background);
-    align-self: center;
-    background-size: 0.75rem;
-    background-repeat: no-repeat;
-    background-position: center;
-    display: inline-block;
-    cursor: pointer;
-    margin-left: var(--spacing-horizontal-xsmall);
-    flex: 0 0 auto;
-    border-radius: 50%;
-    border-color: transparent;
-    height: var(--font-size-default);
-    width: var(--font-size-default);
-  }
-
-  &:is(button) {
-    cursor: pointer;
-  }
-
-  &:hover:not(:has(.dismiss)),
-  & > .dismiss:hover {
-    background-color: var(
-      --intent-color-tinted-hover,
-      var(--chip-color-background-hover)
-    );
-  }
-
-  &:active:not(:has(.dismiss)),
-  & > .dismiss:active {
-    background-color: var(
-      --intent-color-tinted-active,
-      var(--chip-color-background-active)
-    );
-  }
-}

package/dist/types/ui/Button/Button.d.ts

@@ -1,6 +0,0 @@
-import type Props from "./types.js";
-import "./styles.css";
-/** Buttons are clickable elements used to perform an action. */
-declare const Button: ({ id, className, appearance, label, ...props }: Props) => React.ReactElement;
-export default Button;
-//# sourceMappingURL=Button.d.ts.map

package/dist/types/ui/Button/Button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,QAAA,MAAM,MAAM,mDAMT,KAAK,KAAG,KAAK,CAAC,YAahB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/types/ui/Button/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Button } from "./Button.js";
-export type { default as ButtonProps, BaseProps as ButtonBaseProps, } from "./types.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/Button/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EACV,OAAO,IAAI,WAAW,EACtB,SAAS,IAAI,eAAe,GAC7B,MAAM,YAAY,CAAC"}

package/dist/types/ui/Button/types.d.ts

@@ -1,15 +0,0 @@
-import type React from "react";
-export interface BaseProps {
-    id?: string;
-    /** Additional CSS classes */
-    className?: string;
-    /** The visual style of the button */
-    appearance?: "neutral" | "base" | "positive" | "negative" | "link";
-    /** Button contents */
-    label: string;
-    /** Optional click handler */
-    onClick?: () => void;
-}
-type Props = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export default Props;
-//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/Button/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACnE,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEvE,eAAe,KAAK,CAAC"}

package/dist/types/ui/Chip/Chip.d.ts

@@ -1,10 +0,0 @@
-import type React from "react";
-import "./styles.css";
-import type { ChipPropsType } from "./types.js";
-/**
- * description of the Chip component
- * @returns {React.ReactElement} - Rendered Chip
- */
-declare const Chip: ({ appearance, lead, value, onClick, onDismiss, id, className, style, ...props }: ChipPropsType) => React.ReactElement;
-export default Chip;
-//# sourceMappingURL=Chip.d.ts.map

package/dist/types/ui/Chip/Chip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD;;;GAGG;AACH,QAAA,MAAM,IAAI,oFAUP,aAAa,KAAG,KAAK,CAAC,YAwBxB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/ui/Chip/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Chip } from "./Chip.js";
-export * from "./types.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/Chip/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}

package/dist/types/ui/Chip/types.d.ts

@@ -1,27 +0,0 @@
-import type React from "react";
-/**
- * Props for the `Chip` component.
- */
-export interface ChipProps {
-    /**
-     * The chip’s appearance.
-     * @default "neutral"
-     */
-    appearance?: "neutral" | "positive" | "negative" | "caution" | "information";
-    /** Text shown before the value. */
-    lead?: string;
-    /** The chip’s value text. */
-    value?: string;
-    /** Called when the chip is clicked. */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Called when the chip is dismissed. */
-    onDismiss?: () => void;
-    /** Unique identifier for the chip. */
-    id?: string;
-    /** Additional CSS class names. */
-    className?: string;
-    /** Inline styles for the chip. */
-    style?: React.CSSProperties;
-}
-export type ChipPropsType = ChipProps & Omit<React.HTMLAttributes<HTMLButtonElement>, "children">;
-//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/Chip/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAE7E,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE/D,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kCAAkC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,GACnC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC"}