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

package/README.md

@@ -0,0 +1,8 @@
+# react-ds-core-form
+
+The collection of Form Components in the DS25.
+
+## Architecture
+
+This package uses the same build as `ds-core` in the same folder. All comments made on the README.md file apply here.
+

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./ui/index.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,63 @@
+/* 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/Button/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,4 @@
+/* @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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,79 @@
+/* @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/esm/ui/Chip/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Chip/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/index.js

@@ -0,0 +1,3 @@
+export * from "./Button/index.js";
+export * from "./Chip/index.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ui/index.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1 @@
+{"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"}

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

@@ -0,0 +1,3 @@
+export * from "./Button/index.js";
+export * from "./Chip/index.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@canonical/react-ds-core-form",
+  "version": "0.9.0-experimental.2",
+  "type": "module",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": ["dist"],
+  "author": {
+    "email": "webteam@canonical.com",
+    "name": "Canonical Webteam"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/canonical/ds25"
+  },
+  "license": "LGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/canonical/ds25/issues"
+  },
+  "homepage": "https://github.com/canonical/ds25#readme",
+  "scripts": {
+    "build": "bun run build:package",
+    "build:storybook": "storybook build",
+    "build:package": "bun run build:package:tsc && bun run build:package:copycss",
+    "build:package:copycss": "copyfiles -u 1 src/ui/**/*.css dist/esm",
+    "build:package:tsc": "tsc -p tsconfig.build.json",
+    "check": "bun run check:biome && bun run check:ts",
+    "check:fix": "bun run check:biome:fix && bun run check:ts",
+    "check:biome": "biome check",
+    "check:biome:fix": "biome check --write",
+    "check:ts": "tsc --noEmit",
+    "storybook": "storybook dev -p 6008 --no-open --host 0.0.0.0",
+    "test": "bun run test:vitest",
+    "test:watch": "bun run test:vitest:watch",
+    "test:vitest": "vitest run",
+    "test:vitest:watch": "vitest"
+  },
+  "dependencies": {
+    "@canonical/storybook-config": "^0.9.0-experimental.2",
+    "@canonical/styles": "^0.9.0-experimental.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@canonical/biome-config": "^0.9.0-experimental.2",
+    "@canonical/typescript-config-react": "^0.9.0-experimental.2",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^22.10.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "copyfiles": "^2.4.1",
+    "globals": "^15.13.0",
+    "jsdom": "^25.0.1",
+    "storybook": "^8.4.7",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^2.1.8"
+  }
+}