@xjur-ui/react 1.0.0 → 1.0.2

package/dist/components/calendar.js

@@ -0,0 +1,751 @@
+// src/components/calendar.tsx
+import "react-day-picker/style.css";
+
+// ../../node_modules/date-fns/locale/_lib/buildFormatLongFn.js
+function buildFormatLongFn(args) {
+  return (options = {}) => {
+    const width = options.width ? String(options.width) : args.defaultWidth;
+    const format = args.formats[width] || args.formats[args.defaultWidth];
+    return format;
+  };
+}
+
+// ../../node_modules/date-fns/locale/_lib/buildLocalizeFn.js
+function buildLocalizeFn(args) {
+  return (value, options) => {
+    const context = options?.context ? String(options.context) : "standalone";
+    let valuesArray;
+    if (context === "formatting" && args.formattingValues) {
+      const defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
+      const width = options?.width ? String(options.width) : defaultWidth;
+      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
+    } else {
+      const defaultWidth = args.defaultWidth;
+      const width = options?.width ? String(options.width) : args.defaultWidth;
+      valuesArray = args.values[width] || args.values[defaultWidth];
+    }
+    const index = args.argumentCallback ? args.argumentCallback(value) : value;
+    return valuesArray[index];
+  };
+}
+
+// ../../node_modules/date-fns/locale/_lib/buildMatchFn.js
+function buildMatchFn(args) {
+  return (string, options = {}) => {
+    const width = options.width;
+    const matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
+    const matchResult = string.match(matchPattern);
+    if (!matchResult) {
+      return null;
+    }
+    const matchedString = matchResult[0];
+    const parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
+    const key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString)) : (
+      // [TODO] -- I challenge you to fix the type
+      findKey(parsePatterns, (pattern) => pattern.test(matchedString))
+    );
+    let value;
+    value = args.valueCallback ? args.valueCallback(key) : key;
+    value = options.valueCallback ? (
+      // [TODO] -- I challenge you to fix the type
+      options.valueCallback(value)
+    ) : value;
+    const rest = string.slice(matchedString.length);
+    return { value, rest };
+  };
+}
+function findKey(object, predicate) {
+  for (const key in object) {
+    if (Object.prototype.hasOwnProperty.call(object, key) && predicate(object[key])) {
+      return key;
+    }
+  }
+  return void 0;
+}
+function findIndex(array, predicate) {
+  for (let key = 0; key < array.length; key++) {
+    if (predicate(array[key])) {
+      return key;
+    }
+  }
+  return void 0;
+}
+
+// ../../node_modules/date-fns/locale/_lib/buildMatchPatternFn.js
+function buildMatchPatternFn(args) {
+  return (string, options = {}) => {
+    const matchResult = string.match(args.matchPattern);
+    if (!matchResult) return null;
+    const matchedString = matchResult[0];
+    const parseResult = string.match(args.parsePattern);
+    if (!parseResult) return null;
+    let value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
+    value = options.valueCallback ? options.valueCallback(value) : value;
+    const rest = string.slice(matchedString.length);
+    return { value, rest };
+  };
+}
+
+// ../../node_modules/date-fns/locale/pt-BR/_lib/formatDistance.js
+var formatDistanceLocale = {
+  lessThanXSeconds: {
+    one: "menos de um segundo",
+    other: "menos de {{count}} segundos"
+  },
+  xSeconds: {
+    one: "1 segundo",
+    other: "{{count}} segundos"
+  },
+  halfAMinute: "meio minuto",
+  lessThanXMinutes: {
+    one: "menos de um minuto",
+    other: "menos de {{count}} minutos"
+  },
+  xMinutes: {
+    one: "1 minuto",
+    other: "{{count}} minutos"
+  },
+  aboutXHours: {
+    one: "cerca de 1 hora",
+    other: "cerca de {{count}} horas"
+  },
+  xHours: {
+    one: "1 hora",
+    other: "{{count}} horas"
+  },
+  xDays: {
+    one: "1 dia",
+    other: "{{count}} dias"
+  },
+  aboutXWeeks: {
+    one: "cerca de 1 semana",
+    other: "cerca de {{count}} semanas"
+  },
+  xWeeks: {
+    one: "1 semana",
+    other: "{{count}} semanas"
+  },
+  aboutXMonths: {
+    one: "cerca de 1 m\xEAs",
+    other: "cerca de {{count}} meses"
+  },
+  xMonths: {
+    one: "1 m\xEAs",
+    other: "{{count}} meses"
+  },
+  aboutXYears: {
+    one: "cerca de 1 ano",
+    other: "cerca de {{count}} anos"
+  },
+  xYears: {
+    one: "1 ano",
+    other: "{{count}} anos"
+  },
+  overXYears: {
+    one: "mais de 1 ano",
+    other: "mais de {{count}} anos"
+  },
+  almostXYears: {
+    one: "quase 1 ano",
+    other: "quase {{count}} anos"
+  }
+};
+var formatDistance = (token, count, options) => {
+  let result;
+  const tokenValue = formatDistanceLocale[token];
+  if (typeof tokenValue === "string") {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace("{{count}}", String(count));
+  }
+  if (options?.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return "em " + result;
+    } else {
+      return "h\xE1 " + result;
+    }
+  }
+  return result;
+};
+
+// ../../node_modules/date-fns/locale/pt-BR/_lib/formatLong.js
+var dateFormats = {
+  full: "EEEE, d 'de' MMMM 'de' y",
+  long: "d 'de' MMMM 'de' y",
+  medium: "d MMM y",
+  short: "dd/MM/yyyy"
+};
+var timeFormats = {
+  full: "HH:mm:ss zzzz",
+  long: "HH:mm:ss z",
+  medium: "HH:mm:ss",
+  short: "HH:mm"
+};
+var dateTimeFormats = {
+  full: "{{date}} '\xE0s' {{time}}",
+  long: "{{date}} '\xE0s' {{time}}",
+  medium: "{{date}}, {{time}}",
+  short: "{{date}}, {{time}}"
+};
+var formatLong = {
+  date: buildFormatLongFn({
+    formats: dateFormats,
+    defaultWidth: "full"
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats,
+    defaultWidth: "full"
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats,
+    defaultWidth: "full"
+  })
+};
+
+// ../../node_modules/date-fns/locale/pt-BR/_lib/formatRelative.js
+var formatRelativeLocale = {
+  lastWeek: (date) => {
+    const weekday = date.getDay();
+    const last = weekday === 0 || weekday === 6 ? "\xFAltimo" : "\xFAltima";
+    return "'" + last + "' eeee '\xE0s' p";
+  },
+  yesterday: "'ontem \xE0s' p",
+  today: "'hoje \xE0s' p",
+  tomorrow: "'amanh\xE3 \xE0s' p",
+  nextWeek: "eeee '\xE0s' p",
+  other: "P"
+};
+var formatRelative = (token, date, _baseDate, _options) => {
+  const format = formatRelativeLocale[token];
+  if (typeof format === "function") {
+    return format(date);
+  }
+  return format;
+};
+
+// ../../node_modules/date-fns/locale/pt-BR/_lib/localize.js
+var eraValues = {
+  narrow: ["AC", "DC"],
+  abbreviated: ["AC", "DC"],
+  wide: ["antes de cristo", "depois de cristo"]
+};
+var quarterValues = {
+  narrow: ["1", "2", "3", "4"],
+  abbreviated: ["T1", "T2", "T3", "T4"],
+  wide: ["1\xBA trimestre", "2\xBA trimestre", "3\xBA trimestre", "4\xBA trimestre"]
+};
+var monthValues = {
+  narrow: ["j", "f", "m", "a", "m", "j", "j", "a", "s", "o", "n", "d"],
+  abbreviated: [
+    "jan",
+    "fev",
+    "mar",
+    "abr",
+    "mai",
+    "jun",
+    "jul",
+    "ago",
+    "set",
+    "out",
+    "nov",
+    "dez"
+  ],
+  wide: [
+    "janeiro",
+    "fevereiro",
+    "mar\xE7o",
+    "abril",
+    "maio",
+    "junho",
+    "julho",
+    "agosto",
+    "setembro",
+    "outubro",
+    "novembro",
+    "dezembro"
+  ]
+};
+var dayValues = {
+  narrow: ["D", "S", "T", "Q", "Q", "S", "S"],
+  short: ["dom", "seg", "ter", "qua", "qui", "sex", "sab"],
+  abbreviated: [
+    "domingo",
+    "segunda",
+    "ter\xE7a",
+    "quarta",
+    "quinta",
+    "sexta",
+    "s\xE1bado"
+  ],
+  wide: [
+    "domingo",
+    "segunda-feira",
+    "ter\xE7a-feira",
+    "quarta-feira",
+    "quinta-feira",
+    "sexta-feira",
+    "s\xE1bado"
+  ]
+};
+var dayPeriodValues = {
+  narrow: {
+    am: "a",
+    pm: "p",
+    midnight: "mn",
+    noon: "md",
+    morning: "manh\xE3",
+    afternoon: "tarde",
+    evening: "tarde",
+    night: "noite"
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "meia-noite",
+    noon: "meio-dia",
+    morning: "manh\xE3",
+    afternoon: "tarde",
+    evening: "tarde",
+    night: "noite"
+  },
+  wide: {
+    am: "a.m.",
+    pm: "p.m.",
+    midnight: "meia-noite",
+    noon: "meio-dia",
+    morning: "manh\xE3",
+    afternoon: "tarde",
+    evening: "tarde",
+    night: "noite"
+  }
+};
+var formattingDayPeriodValues = {
+  narrow: {
+    am: "a",
+    pm: "p",
+    midnight: "mn",
+    noon: "md",
+    morning: "da manh\xE3",
+    afternoon: "da tarde",
+    evening: "da tarde",
+    night: "da noite"
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "meia-noite",
+    noon: "meio-dia",
+    morning: "da manh\xE3",
+    afternoon: "da tarde",
+    evening: "da tarde",
+    night: "da noite"
+  },
+  wide: {
+    am: "a.m.",
+    pm: "p.m.",
+    midnight: "meia-noite",
+    noon: "meio-dia",
+    morning: "da manh\xE3",
+    afternoon: "da tarde",
+    evening: "da tarde",
+    night: "da noite"
+  }
+};
+var ordinalNumber = (dirtyNumber, options) => {
+  const number = Number(dirtyNumber);
+  if (options?.unit === "week") {
+    return number + "\xAA";
+  }
+  return number + "\xBA";
+};
+var localize = {
+  ordinalNumber,
+  era: buildLocalizeFn({
+    values: eraValues,
+    defaultWidth: "wide"
+  }),
+  quarter: buildLocalizeFn({
+    values: quarterValues,
+    defaultWidth: "wide",
+    argumentCallback: (quarter) => quarter - 1
+  }),
+  month: buildLocalizeFn({
+    values: monthValues,
+    defaultWidth: "wide"
+  }),
+  day: buildLocalizeFn({
+    values: dayValues,
+    defaultWidth: "wide"
+  }),
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues,
+    defaultWidth: "wide",
+    formattingValues: formattingDayPeriodValues,
+    defaultFormattingWidth: "wide"
+  })
+};
+
+// ../../node_modules/date-fns/locale/pt-BR/_lib/match.js
+var matchOrdinalNumberPattern = /^(\d+)[ºªo]?/i;
+var parseOrdinalNumberPattern = /\d+/i;
+var matchEraPatterns = {
+  narrow: /^(ac|dc|a|d)/i,
+  abbreviated: /^(a\.?\s?c\.?|d\.?\s?c\.?)/i,
+  wide: /^(antes de cristo|depois de cristo)/i
+};
+var parseEraPatterns = {
+  any: [/^ac/i, /^dc/i],
+  wide: [/^antes de cristo/i, /^depois de cristo/i]
+};
+var matchQuarterPatterns = {
+  narrow: /^[1234]/i,
+  abbreviated: /^T[1234]/i,
+  wide: /^[1234](º)? trimestre/i
+};
+var parseQuarterPatterns = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+};
+var matchMonthPatterns = {
+  narrow: /^[jfmajsond]/i,
+  abbreviated: /^(jan|fev|mar|abr|mai|jun|jul|ago|set|out|nov|dez)/i,
+  wide: /^(janeiro|fevereiro|março|abril|maio|junho|julho|agosto|setembro|outubro|novembro|dezembro)/i
+};
+var parseMonthPatterns = {
+  narrow: [
+    /^j/i,
+    /^f/i,
+    /^m/i,
+    /^a/i,
+    /^m/i,
+    /^j/i,
+    /^j/i,
+    /^a/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i
+  ],
+  any: [
+    /^ja/i,
+    /^fev/i,
+    /^mar/i,
+    /^abr/i,
+    /^mai/i,
+    /^jun/i,
+    /^jul/i,
+    /^ago/i,
+    /^set/i,
+    /^out/i,
+    /^nov/i,
+    /^dez/i
+  ]
+};
+var matchDayPatterns = {
+  narrow: /^(dom|[23456]ª?|s[aá]b)/i,
+  short: /^(dom|[23456]ª?|s[aá]b)/i,
+  abbreviated: /^(dom|seg|ter|qua|qui|sex|s[aá]b)/i,
+  wide: /^(domingo|(segunda|ter[cç]a|quarta|quinta|sexta)([- ]feira)?|s[aá]bado)/i
+};
+var parseDayPatterns = {
+  short: [/^d/i, /^2/i, /^3/i, /^4/i, /^5/i, /^6/i, /^s[aá]/i],
+  narrow: [/^d/i, /^2/i, /^3/i, /^4/i, /^5/i, /^6/i, /^s[aá]/i],
+  any: [/^d/i, /^seg/i, /^t/i, /^qua/i, /^qui/i, /^sex/i, /^s[aá]b/i]
+};
+var matchDayPeriodPatterns = {
+  narrow: /^(a|p|mn|md|(da) (manhã|tarde|noite))/i,
+  any: /^([ap]\.?\s?m\.?|meia[-\s]noite|meio[-\s]dia|(da) (manhã|tarde|noite))/i
+};
+var parseDayPeriodPatterns = {
+  any: {
+    am: /^a/i,
+    pm: /^p/i,
+    midnight: /^mn|^meia[-\s]noite/i,
+    noon: /^md|^meio[-\s]dia/i,
+    morning: /manhã/i,
+    afternoon: /tarde/i,
+    evening: /tarde/i,
+    night: /noite/i
+  }
+};
+var match = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern,
+    parsePattern: parseOrdinalNumberPattern,
+    valueCallback: (value) => parseInt(value, 10)
+  }),
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseEraPatterns,
+    defaultParseWidth: "any"
+  }),
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseQuarterPatterns,
+    defaultParseWidth: "any",
+    valueCallback: (index) => index + 1
+  }),
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseMonthPatterns,
+    defaultParseWidth: "any"
+  }),
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseDayPatterns,
+    defaultParseWidth: "any"
+  }),
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns,
+    defaultMatchWidth: "any",
+    parsePatterns: parseDayPeriodPatterns,
+    defaultParseWidth: "any"
+  })
+};
+
+// ../../node_modules/date-fns/locale/pt-BR.js
+var ptBR = {
+  code: "pt-BR",
+  formatDistance,
+  formatLong,
+  formatRelative,
+  localize,
+  match,
+  options: {
+    weekStartsOn: 0,
+    firstWeekContainsDate: 1
+  }
+};
+
+// src/components/calendar.tsx
+import { cx as cx3 } from "@xjur-ui/util";
+import {
+  DayPicker,
+  getDefaultClassNames
+} from "react-day-picker";
+
+// src/components/icon.tsx
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function Icon({ className, filled = false, name, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: cx(
+        "material-symbols-outlined",
+        "text-size-body-lg",
+        className
+      ),
+      style: {
+        fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,
+        ...props.style
+      },
+      children: name
+    }
+  );
+}
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva, cx as cx2 } from "@xjur-ui/util";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  [
+    "outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors"
+  ],
+  {
+    variants: {
+      size: {
+        md: "py-small_1x-alt px-medium text-size-body-md",
+        sm: "py-small-1x px-small text-size-label-sm",
+        icon_md: "p-small text-size-body-md h-large-4x w-large-4x",
+        icon_sm: "p-small-1x text-size-label-sm h-large-2x w-large-2x"
+      },
+      variant: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        destructive: "",
+        outlined: "bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed"
+      },
+      appearance: {
+        solid: "",
+        ghost: "bg-transparent"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "primary",
+        appearance: "solid",
+        class: "bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed"
+      },
+      {
+        variant: "primary",
+        appearance: "ghost",
+        class: "text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed"
+      },
+      {
+        variant: "secondary",
+        appearance: "solid",
+        class: "bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active"
+      },
+      {
+        variant: "secondary",
+        appearance: "ghost",
+        class: "hover:bg-layer-1-hover active:bg-layer-1-pressed"
+      },
+      {
+        variant: "tertiary",
+        appearance: "solid",
+        class: "bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active"
+      },
+      {
+        variant: "tertiary",
+        appearance: "ghost",
+        class: "hover:bg-layer-2-hover active:bg-layer-2-pressed"
+      },
+      {
+        variant: "destructive",
+        appearance: "solid",
+        class: "bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed"
+      },
+      {
+        variant: "destructive",
+        appearance: "ghost",
+        class: "text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed"
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "primary",
+      appearance: "solid"
+    }
+  }
+);
+function Button({
+  asChild,
+  className,
+  variant = "primary",
+  size = "md",
+  appearance = "solid",
+  ...props
+}) {
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Component,
+    {
+      className: cx2(buttonVariants({ variant, appearance, size }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/calendar.tsx
+import {} from "react-day-picker";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function Calendar({
+  showOutsideDays = true,
+  locale = ptBR,
+  navLayout = "around",
+  handleClear,
+  handleToday,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const classNames = {
+    root: cx3(
+      "bg-layer-2-idle shadow-elevation-2 rounded-[6px] p-small w-fit border border-border-layer-2 text-size-body-md text-neutral-dark font-inter",
+      defaultClassNames.root
+    ),
+    day: cx3("rounded-circle  hover:bg-layer-2-hover"),
+    caption_label: cx3(
+      "text-size-label-md text-neutral-dark font-medium",
+      defaultClassNames.caption_label
+    ),
+    outside: cx3("text-neutral-placeholder", defaultClassNames.outside),
+    selected: cx3(
+      "text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:bg-primary-alt-active"
+    ),
+    disabled: cx3("opacity-60", defaultClassNames.disabled),
+    today: cx3(
+      "!text-primary-label-active font-medium",
+      defaultClassNames.today
+    ),
+    range_start: cx3(
+      "text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:bg-primary-alt-active"
+    ),
+    range_end: cx3(
+      "text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:bg-primary-alt-active"
+    ),
+    range_middle: cx3("!bg-layer-2-hover !text-primary-label-active")
+  };
+  return /* @__PURE__ */ jsx3(
+    DayPicker,
+    {
+      classNames: { ...classNames, ...props.classNames },
+      components: {
+        Chevron: ({ orientation }) => {
+          const icon = orientation === "left" ? "chevron_left" : "chevron_right";
+          return /* @__PURE__ */ jsx3(
+            Icon,
+            {
+              className: "size-large text-icon-neutral-3",
+              name: icon
+            }
+          );
+        },
+        ...props.components
+      },
+      footer: (handleClear || handleToday) && /* @__PURE__ */ jsxs("div", { className: "py-small border-border-layer-2 mt-small flex h-full w-full items-center justify-between border-t", children: [
+        handleToday && /* @__PURE__ */ jsx3(
+          Button,
+          {
+            appearance: "ghost",
+            variant: "secondary",
+            onClick: handleToday,
+            children: "Hoje"
+          }
+        ),
+        handleClear && /* @__PURE__ */ jsx3(
+          Button,
+          {
+            appearance: "ghost",
+            variant: "secondary",
+            onClick: handleClear,
+            children: "Limpar"
+          }
+        )
+      ] }),
+      formatters: {
+        formatWeekdayName: (date) => {
+          const weekday = date.toLocaleDateString("pt-BR", { weekday: "short" });
+          return weekday.charAt(0).toUpperCase() + weekday.slice(1).replace(".", "");
+        },
+        formatCaption(month) {
+          const monthName = month.toLocaleDateString("pt-BR", {
+            month: "long"
+          });
+          return `${capitalize(monthName)} ${month.getFullYear()}`;
+        },
+        ...props.formatters
+      },
+      locale,
+      mode: props.mode ?? "single",
+      navLayout,
+      showOutsideDays,
+      ...props
+    }
+  );
+}
+export {
+  Calendar
+};